如何阻止 Hammer js 事件从内部元素触发？答案

【问题标题】：How to stop Hammer js events from firing from inner elements?如何阻止 Hammer js 事件从内部元素触发？
【发布时间】：2023-03-28 08:55:01
【问题描述】：

我已经找到了这个问题的一些答案，但对我没有用。

我正在使用 Hammer js 进行幻灯片放映。幻灯片项目可以包含图像和链接。我在图像上设置了pointer-events: none。但很明显，我不能在链接上这样做。

无法找到让链接被点击但避免对其进行锤击事件的方法。我当前的实现非常基础（代码取自更大的类）：

if(this.options.touch_enabled){
  this.hm = new Hammer(this.data_box, {
    recognizers: [
      [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }]
      ,[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }, ['swipe']]
    ]
    ,domEvents: true
  });

  this.hm.on('panleft', function(e){
    [...]
  }.bind(this));
  this.hm.on('panright', function(e){
    [...]
  }.bind(this));
}// touch

在内部链接而不是 data_box（容器）内触发的 pan 事件，因此脚本不起作用，因为 deltaX 基于链接而不是容器。

有什么解决办法吗？我尝试了domEvents: true 并用stopPropagation 和preventDefault 玩了一点，但没有奏效。

【问题讨论】：

标签： javascript event-handling swipe hammer.js pan

【解决方案1】：

一个可能的解决方案是简单地返回 false ondragstart：

$('#my_box a').on('dragstart', function(e){
  return false; // or, e.preventDefault();
});

这将防止冒泡，因此正常/预期的平移将起作用，但您仍然可以点击链接。

您可能也希望将此行为扩展到其他元素，例如图像，但在可能的情况下，您可以简单地对它们使用 pointer-events: none; 规则。

img{
   pointer-events: none;
}

【讨论】：