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

Question

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

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

我的主要目标是取消 mousedown 事件只有属于 on 方法调用的 end 函数结束。

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

此问题会导致 Firefox 出现意外的事件阻塞。还有代码运行s 两次，这是不必要的。我想在 click 或 touch 元素时重定向网站，在 drag 或 swipe.

时阻止

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

添加return false;行
- 遗憾的是，return false 会在 end 功能结束后停止所有剩余的事件。我的目标是只取消 mousedown，而不是整个 events。因此我不能只把这条线放到函数中。
在off方法中添加mousedown事件
- 这也不行。属于 off 方法的 events 仍然保持关闭状态。因此，如果我在滑动元素后尝试拖动，什么也不会发生，因为 mousedown 事件现在已关闭。
添加preventDefault()或stopPropagation()
- 不能使用与情况1相同的原因。
使用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

据我所知，您的意图是让 link 在单击鼠标移动时不重定向。

首先，我假设您不希望 link 可拖动，因此添加 draggable="false" 标签。这将防止可能影响您已发送内容之外的代码的事件（例如 redirecting/dropping links）。

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

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

How would I cancel a specific event in javascript?

javascript

click

touch

drag

swipe