Question

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

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

我的主要目标是取消名为{{1}的mousedown方法末尾的on事件 }功能。

如果我运行end事件2，则总是会触发不同的事件。看到这张图片：

此问题导致Firefox出现意外的事件阻止。而且代码运行两次，这是不必要的。我想在元素touchstart或click时重定向网站，而在touch或drag时阻止网站。

我搜索了如何阻止Google上的特定事件，但是没有找到任何信息，因此我自己尝试了几种方法。但是，所有情况均无效。

添加swipe行
- 可悲的是，return false;使return false函数结束后，所有剩余事件停止。我的目标是仅取消end，而不是整个mousedown。因此，我不能只将行放入函数中。
将events事件添加到mousedown方法中
- 这也不起作用。属于off方法的events在关闭时仍然保留。因此，如果在滑动元素后尝试拖动，则不会发生任何事情，因为off事件现在已关闭。
添加mousedown或preventDefault()
- 不能使用与案例1相同的理由。
使用stopPropagation()分隔并为Firefox创建新功能
- 问题在于引发了意外事件，而不是浏览器。

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

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;
      }

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

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

1 个答案: