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

Question

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

我正在使用 Hammer js 制作幻灯片。幻灯片项目可以包含图像和链接。我在图像上设置了 pointer-events: none。但显然我不能在链接上这样做。

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

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（容器）内触发，因此脚本无法正常工作，因为 deltaX 基于链接而不是容器。

有什么解决办法吗？我尝试了 domEvents: true 并尝试了 stopPropagation 和 preventDefault，但 none 有效。

Answer 1

一个可能的解决方案就是 return false ondragstart:

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

这将防止冒泡，因此 normal/intended 平移将起作用，但您仍然可以单击链接。

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

img{
   pointer-events: none;
}

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

How to stop Hammer js events from firing from inner elements?

javascript

event-handling

pan

swipe

hammer.js