Question

我有一个父母和孩子的div。平移/拖动孩子不应该影响父母。 This is a similar question但一年前被问过，我使用的是更新版本的Hammer.js和jQuery包装器。

我的假设是我必须以某种方式停止传播（），但我不确定如何使用它。

我嘲笑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

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

Hammer能够使用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可让您访问“常规”＃39;事件对象的可供性。

Answer 3

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

例如：

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

Answer 4

我遇到了同样的问题，特别是嵌套的Hammer组件没有正确停止传播。在我的情况下，我想要一个模态容器（这是最高级别的父组件，全屏具有不透明的黑色背景）来处理关闭整个模式的单击事件。儿童组件保留内容，我想取消与这些孩子的传播。换句话说，所需的行为是：模态内部的单击不执行任何操作，但模态外部的单击会关闭模态。

react-hammerjs库增加了额外的抽象层，包括表示不正确的事件传播的potential bug reports，这进一步复杂化。

无论我做了什么，我都无法让stopPropagation()工作。即使将options.domEvents设置为true也是如此。我也尝试挖掘event.srcEvent.stopPropagation()（和变体）但没有成功。

我发现无论stopImmediatePropagation()设置如何，使用domEvents都可以按预期工作。我知道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>
)

Answer 5

我遇到了类似的情况，其中我有两个可滑动的容器在彼此的顶部，只希望顶部的容器处理事件。出于某种原因，event.srcEvent.stopPropagation无法正常工作。

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

Answer 6

这才有效：

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

Answer 7

有同样的问题，但是能够通过启用domEvents来处理这个问题。

Hammer.defaults.domEvents = true;

启用后，event.stopPropagation（）;工作得很好。

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

7 个答案: