如果 mousedown 然后触发 mousemove 否则什么都不做

Question

我有一个技术问题，我不确定解决它的最佳方法是什么。

基本上我正在处理一个音频进度条，用户可以在其中更改歌曲的位置。这应该通过单击或按住鼠标并移动它来完成。

elem.addEventListener("mouseup", function(event){
  elem.removeEventListener("mousemove", fn);
});

elem.addEventListener("mousedown", function(event){
  elem.addEventListener("mousemove", function(event){
      // Stuff to do
  }, fn);
});

所以基本上：

如果按住鼠标然后移动，则执行某些操作。如果释放鼠标，则阻止 mousemove.

的触发

我知道如果我继续这样做它可能会起作用，但对我来说它看起来像一团糟。我不想养成坏习惯。

我的问题是：如何使用最佳实践使这项工作发挥作用？

注意：我也尝试了以下方法：

function fn(event) {
if(event.button == 0) {
      elem.addEventListener("mousemove", function(event){
          // Stuff to do
      });
}
}

我在这里缺少什么！

Answer 1

不要add/remove 侦听器，只需在相应的触发操作处设置一个变量即可：

var isMousedown = false;

elem.addEventListener("mousedown", function (event) {
    isMousedown = true;
}

elem.addEventListener("mouseup", function (event) {
    isMousedown = false;
});

elem.addEventListener("mousemove", function (event) {
    if (isMousedown) {
        // do stuff
    } else {
        // do different stuff, or nothing
    }
});

您甚至可能希望将 mousedown/mouseup 侦听器放在父元素（甚至是根元素）上，以避免鼠标弹起发生在目标之外的情况，如果您的情况有可能的话。

如果 mousedown 然后触发 mousemove 否则什么都不做

If mousedown then trigger mousemove else do nothing

javascript

mouseevent

我的问题是：如何使用最佳实践使这项工作发挥作用？