Question

我已经找到了解决该问题的方法，但是对我没有帮助。

我正在使用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一起玩了一点，但是都没有。

Answer 1

可能的解决方案只是返回错误的ondragstart：

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

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

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

img{
   pointer-events: none;
}

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

1 个答案: