我將如何取消 javascript 中的特定事件？

Question

我在on方法中添加了 2 個不同的事件，每個事件都稱為touchstart和mousedown ，如下所示：

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

我的主要目標是取消了mousedown唯一的事件屬於on在所謂的最終方法end的功能。

如果我運行touchstart事件，2 個不同的事件總是一起觸發。 看這張圖：

此問題會導致 Firefox 出現意外事件阻止。 而且代碼運行兩次，這是不必要的。 我想在click或touch元素時重定向網站，在drag或swipe時阻止。

我在谷歌上搜索了如何防止特定事件，但沒有找到任何信息，所以我自己嘗試了幾種方法。 然而，所有的案例都沒有奏效。

1. 添加return false; 線

   • 可悲的是， return false會在end函數結束后停止所有剩余的事件。 我的目標是僅取消mousedown ，而不是整個events 。 因此，我不能只是將行放入函數中。

2. 在off方法中添加mousedown事件

   • 這也行不通。 屬於off方法的events它off仍然保留。 因此，如果我在滑動元素后嘗試拖動，則不會發生任何事情，因為mousedown事件現在已關閉。

3. 添加preventDefault()或stopPropagation()

   • 那些不能用作案例1的相同原因。

4. 使用RegExp為 Firefox 分離並創建一個新函數

   • 問題是觸發了不需要的事件，而不是瀏覽器。

有沒有辦法取消此代碼中的特定event ？

 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();