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

【问题标题】：How can I prevent dragstart from firing after dragend on a rapidly dragged element?如何防止在快速拖动元素上的 dragend 后触发 dragstart？
【发布时间】：2021-07-15 22:46:55
【问题描述】：

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

【问题讨论】：

请在代码中提供此问题的示例供我们调试。如果您想阻止函数触发，请让它检查一个全局变量，该变量已更改为允许该函数触发的信号。
我没有发布代码，因为那里发生了很多事情，问题仅限于我在问题中的描述。
同意汤姆的观点，我遇到过类似的问题，您可以使用在 dragend 时更改为 true 的布尔值，并且在 dragstart 中检查并看到布尔值为 true 时，它会强制更改不透明度。如果仍然为 false，则正常运行该函数。

标签： javascript events drag-and-drop draggable drag

【解决方案1】：

这有帮助吗？去抖动以延迟鼠标悬停事件恢复。

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

【讨论】：