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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在javascript中取消特定事件?相关的知识,希望对你有一定的参考价值。

我在touchstart方法中添加了两个不同的事件,分别称为mousedownon,如下所示:

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

我的主要目标是在被称为mousedown函数结束时取消属于on方法的end事件。

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

enter image description here

此问题会导致Firefox出现意外事件阻塞。而且代码运行两次是不必要的。当我在clicktouch元素时,我想重定向网站,防止当我dragswipe

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

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

以上是关于如何在javascript中取消特定事件?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用事件侦听器来加载动画片段的循环

如何使用 javascript 取消注册/取消绑定 Material ui 中的事件

JavaScript-事件

javascript 兼容W3c和IE的添加(取消)事件监听方法

JavaScript-取消事件-e.preventDefault();

js中addEventListener如何取消