如何在javascript中取消特定事件？

Posted 2021-04-11

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

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. 将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>

答案

正如我所听到的那样，你的意图是当鼠标在点击中移动时，链接不会重定向。

首先，我假设您不希望链接可拖动，因此请添加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();