如何在快速拖动元素上的 dragend 之后防止 dragstart 触发？

问题描述

在我的应用程序中，我在 dragstart 中将拖动元素的不透明度设置为 0.4，并在 dragend 中将其恢复为 1。这在大多数情况下都可以正常工作，除非用户非常快速地拖动元素，在这种情况下，第一个 dragstart 事件被触发，然后在 最后的第二个 dragstart 事件 之前触发第一个 dragend，即 NOT 伴随着 dragend，因此不透明度保持为 0.4。我怎样才能防止这种行为？我通过登录控制台确认了事件顺序。

解决方法

这有帮助吗？去抖动延迟鼠标悬停事件还原事物。

const debounce = (func,delay) => {
    let debounceTimer
    return function() {
        const context = this
        const args = arguments
            clearTimeout(debounceTimer)
                debounceTimer
            = setTimeout(() => func.apply(context,args),delay)
    }
} 


window.addEventListener("mousemove",() => {
  document.querySelector("body").innerText = "Mouse moving!";
});

window.addEventListener("mousemove",debounce(() => {
  document.querySelector("body").innerText = "not moving";
},300));

body {
  width: 400px;
  height: 200px;
  background: lightgray;
  text-align: center;
}

not moving