如何在Hammer.js 2.0中使用stopPropagation()？

Question

我有一个父div和子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
});

有什么建议或建议吗？谢谢!

Answer 1

在锤子2.0.6中，正如其他人所回答的那样，您可以调用event.srcEvent.stopPropagation()。需要注意的是，您必须按照文档中的说明设置domEvents=true。

锤子能够使用选项domEvents: true触发DOM事件。这将提供像stopPropagation()这样的方法，因此您可以使用事件委托。锤子不会解绑绑定的事件。

示例代码

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/

Answer 2

试试event.srcEvent.stopPropagation()。Hammer将自身包裹在本机事件对象周围；srcEvent使您能够访问事件对象的“通常”启示。

Answer 3

我也遇到了同样的问题，特别是嵌套的Hammer组件没有正确地停止传播。在我的例子中，我想要一个模态容器(它是最高级别的父组件，全屏，带有不透明的黑色背景)来处理关闭整个模态的click事件。子组件包含内容，我想取消与这些子组件的传播。换句话说，所需的行为是:在模式内单击不执行任何操作，但在模式外单击将关闭模式。

由于react-hammerjs库添加了额外的抽象层，包括指示不正确事件传播的potential bug reports，这一点变得更加复杂。

无论我做了什么，我都不能让stopPropagation()工作。即使options.domEvents设置为true也是如此。我还尝试了event.srcEvent.stopPropagation() (和变种)，但没有成功。

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

下面是我的最后一个工作正常的代码片段：

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