如何使用 Hammer.js 2.0 停止传播（）？答案

【问题标题】：How to stopPropagation() w/ Hammer.js 2.0?如何使用 Hammer.js 2.0 停止传播（）？
【发布时间】：2014-09-24 22:08:17
【问题描述】：

我有一个父子 div。平移/拖动子级不应影响父级。 This is a similar question 但在一年前被问到，我正在使用带有 jQuery 包装器的较新版本的 Hammer.js。

我的假设是我必须以某种方式 stopPropagation() 但我不确定如何使用它。

我模拟了a demo showing my problem on JsFiddle。我还注释掉了我尝试过的几件事。

$(".outer-box").hammer().bind("panright", function(event){
    // do stuff when panning
    // panning here should move both boxes
});
$(".outer-box").hammer().bind("panend", function(event){
    // do stuff when panning ends
});

$(".inner-box").hammer().bind("panright", function(event){
    // do stuff when panning
    // panning here should only affect the inner box
});
$(".inner-box").hammer().bind("panend", function(event){
    // do stuff when panning ends
});

有什么建议或提示吗？谢谢！

【问题讨论】：

标签： javascript jquery hammer.js stoppropagation

【解决方案1】：

在 Hammer 2.0.6 中，正如其他人已经回答的那样，您可以致电 event.srcEvent.stopPropagation()。需要注意的是，您必须根据文档设置domEvents=true。

Hammer 能够使用 domEvents: true 选项触发 DOM 事件。这将为您提供诸如 stopPropagation() 之类的方法，因此您可以使用事件委托。 Hammer 不会解除绑定事件。

示例代码

var mc = new Hammer.Manager(elem);
mc.options.domEvents=true; // enable dom events
var pinch = new Hammer.Pinch();
mc.add(pinch);
mc.get('pinch').set({ enable: true });
mc.on("pinch",function(e){e.srcEvent.stopPropagation();});

或

var hammertime = new Hammer(elem);
hammertime.domEvents = true;
hammertime.on("panstart", function(e){e.srcEvent.stopPropagation();});

此技术列在文档的提示页面上，此处为http://hammerjs.github.io/tips/

【讨论】：

【解决方案2】：

试试event.srcEvent.stopPropagation()。 Hammer 将自身包裹在原生事件对象周围； srcEvent 让您可以访问事件对象的“常规”功能。

【讨论】：

【解决方案3】：

我遇到了同样的问题，特别是嵌套的 Hammer 组件没有正确停止传播。就我而言，我想要一个模态容器（它是最高级别的父组件，全屏，不透明的黑色背景）来处理关闭整个模态的单击事件。子组件包含内容，我想取消与这些子组件的传播。换句话说，期望的行为是：在模态框内单击什么也不做，但在模态框外单击会关闭模态框。

react-hammerjs 库增加了一个额外的抽象层，包括指示不正确的事件传播的potential bug reports，这使情况变得更加复杂。

无论我做什么，我都无法让stopPropagation() 工作。即使 options.domEvents 设置为 true。我还尝试深入研究event.srcEvent.stopPropagation()（和变体）但没有成功。

我发现无论domEvents 设置如何，使用stopImmediatePropagation() 都能正常工作。我知道stopImmediatePropagation() 可能更极端，但我没有遇到任何副作用。子项内的单击处理程序（如按钮）仍然可以正常工作，我可以通过单击容器来取消模式。

这是我的最后一个运行良好的 sn-p：

const myComponent = (props) => (
   <Hammer onTap={() => { ... cancel modal ... }} >
      <div className={'modal-container'} >
         <Hammer onTap={(e) => e.srcEvent.stopImmediatePropagation()}>
            <div className={'modal-content'}>
               ... modal content
               <Hammer onTap={() => { ... button handler ... }}>
                  <button>Take Action</button>
               </Hammer>
            </div>
         </Hammer>
      </div>
   </Hammer>
)

【讨论】：

stopImmediatePropagation 为我工作，而只是 stopPropagation 不是。谢谢！
起初 stopImmediatePropagation 似乎也对我有用。但它最终产生了我无法解释的副作用。一旦它被调用一次，外部元素的处理程序就不会触发，即使其他点击应该被它捕获。我最终没有使用它，而是在 srcEvent 中设置了一个新属性，更高级别可以在冒泡时查找它。在某种意义上更干净，在另一种意义上不是这样。现在我必须对以上任何级别的这个新属性进行标准化。但是以正确的顺序注册处理程序是关键。谢谢。

【解决方案4】：

很遗憾，stopPropagation() 不起作用。您需要检查手势的目标以了解触发事件的位置。

例如：

$(parent_element).hammer().bind(gesture_type, function(event) {
    if (event.gesture.target.className === correctClass)
        doStuff();
});

【讨论】：

【解决方案5】：

这行得通：

$(".outer-box").hammer({
  preventDefault: true,
  domEvents: true
}).on("panright", function() { });

【讨论】：

【解决方案6】：

我也遇到过类似的情况，我有两个可滑动的容器相互叠放，只希望最上面的一个来处理事件。出于某种原因，event.srcEvent.stopPropagation 无法正常工作。

事实证明，存在一个扩展 Hammer.js 的库，该库具有名为 propagating-hammerjs 的事件传播。我把它放到我的项目中，它解决了我的问题。

【讨论】：

太糟糕了，我将停止使用 HammerJs

【解决方案7】：

有同样的问题，但是通过启用 domEvents 能够解决这个问题。

Hammer.defaults.domEvents = true;

一旦启用，event.stopPropagation();工作正常。

【讨论】：