javascript - 如何取消 JavaScript 中的特定事件？

Question

我在 on 方法中添加了 2 个不同的事件，分别称为 touchstart 和 mousedown，如下所示:

this.$el.on('touchstart mousedown', (e) => { this.start(e); })

我的主要目标是仅取消属于最后的on方法的mousedown事件被调用的 end 函数。

如果我运行 touchstart 事件，2 个不同的事件总是一起触发。看这张图:

此问题会导致 Firefox 出现不需要的事件阻止。而且代码运行两次，这是不必要的。我想在单击或触摸元素时重定向网站，并在拖动或滑动时阻止。

我在谷歌上搜索了如何阻止特定事件，但没有找到任何信息，所以我自己尝试了几种方法。然而，所有的案例都没有奏效。

1. 添加return false;行

   • 遗憾的是，return false 会在 end 函数结束后停止所有剩余事件。我的目标是仅取消 mousedown，而不是整个 事件。因此我不能只是将这行代码放入函数中。

2. 将 mousedown 事件添加到 off 方法中

   • 这也行不通。属于 off 方法的 events 仍然保持其关闭状态。因此，如果我在滑动元素后尝试拖动，则不会发生任何事情，因为 mousedown 事件现已关闭。

3. 添加 preventDefault() 或 stopPropagation()

   • 不能与情况1的理由相同。

4. 使用RegExp分离并为Firefox创建一个新函数

   • 问题在于触发了不需要的事件，而不是浏览器。

有什么方法可以取消此代码中的特定事件吗？

class Evt {
  constructor($el) {
    this.$el = $el;
  }
  start(e) {
    console.log('start Function');
    this.$el.off('click');
    this.$el.on({
      ['touchmove mousemove']: (e) => this.eventmove(e),
      ['touchend mouseup']: (e) => this.end(e)
    });
  }
  eventmove(e) {
    e.preventDefault();
    console.log('move function');
    this.$el.on('click', (e) => {e.preventDefault();});
    return false;
  }
  end(e) {
    console.log('end function');
    this.$el.on('click');
    this.$el.off('touchmove touchend mousemove mouseup');
  }
  apply() {
    this.$el.on('touchstart mousedown', (e) => {
      this.start(e);
    })
  }
}
var thatEvt = new Evt($('#link'));
thatEvt.apply();

      a {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        background-color: brown;
        font-family: Helvetica;
      }

    <a id="link" href="https://google.co.uk">
      Click/Touch and Drag/Swipe
    </a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

据我所知，您的目的是当鼠标在单击内移动时不重定向链接。

首先，我假设您不希望链接可拖动，因此添加 draggable="false" 标记。这将防止可能影响您发送的代码之外的事件(例如重定向/删除链接)。

<a id="link" href="https://google.co.uk" draggable="false">
  Click/Touch and Drag/Swipe
</a>

如果这不能解决您的问题，我在下面整理了这段代码，它可能更复杂，但应该更健壮一点。

class Evt {
  constructor($el) {
    this.$el = $el;
    this.active = false;
    this.preventRedirect = false;
  }
  start(e) {
    console.log('start Function');
    this.active = true;
    this.preventRedirect = false;
  }
  eventmove(e) {
    if (this.active) {
      console.log('move function');
      this.preventRedirect = true;
    }
  }
  end(e) {
    if (this.active) {
      console.log('end function');
      this.active = false;
    }
  }
  apply() {
    this.$el.on({
      ['touchstart mousedown']: (e) => this.start(e),
      ['click']: (e) => { //preventing onclick only if preventRedirect is set
        if (this.preventRedirect) {
          e.preventDefault();
          return false;
        }
      }
    });
    $("html").on({ //so that the mouse can move outside the element and still work.
      ['touchmove mousemove']: (e) => this.eventmove(e),
      ['touchend mouseup']: (e) => this.end(e)
    });
  }
}
var thatEvt = new Evt($('#link'));
thatEvt.apply();