Question

我遇到了技术问题，我不确定解决问题的最佳方法是什么。

基本上我正在处理音频进度条，用户可以在其中更改歌曲的位置。这应该通过点击或保持mousedown并移动它来完成。

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

不要添加/删除侦听器，只需在触发操作中设置变量：

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其他什么都不做

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

1 个答案: