如何停止傳播（）w/Hammer.js 2.0？

我有一個父母和子div。平移/拖動孩子不應該影響父母。 This is a similar question但在一年前被問及，我正在使用更新版本的Hammer.js w/jQuery包裝器。如何停止傳播（）w/Hammer.js 2.0？

我的假設是，我不得不以某種方式停止傳播（），但我不確定如何使用它。我嘲笑了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 
});

任何建議或提示？謝謝！

來源

2014-09-24 Eric

嘗試event.srcEvent.stopPropagation()。 Hammer圍繞本地事件對象進行包裝; srcEvent可讓您訪問事件對象的「常規」功能。

來源

2014-11-01 03:16:13 mlehmeher

我想這一點，它不工作！ – 2018-02-24 18:34:10

不幸的是，stopPropagation()不起作用。您需要檢查手勢的目標以瞭解事件觸發的位置。

例如：

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

來源

2015-03-10 13:16:31 dom

我也有類似的情況，即我對對方的前兩名滑動展示容器，只想要最上面的一個來處理該事件。由於某種原因，event.srcEvent.stopPropagation只是無法正常工作。

事實證明，存在一個擴展名爲propagating-hammerjs的事件傳播的Hammer.js庫。我把它拉進我的項目，它解決了我的問題。

來源

2016-04-18 17:32:47 JavaSplice

在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/

來源

2016-08-23 14:12:41 gtzilla

這只是工作：

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

來源

2016-12-10 19:47:31 Ergousha

有同樣的問題，但是能夠通過啓用domEvents來處理此問題。

Hammer.defaults.domEvents = true;

一旦啓用，event.stopPropagation（）;工作得很好。

來源

2017-06-05 19:58:13 Sean

我遇到了同樣的問題，特別是嵌套的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> 
)

來源

2017-09-28 16:46:36 Blaine

如何停止傳播（）w/Hammer.js 2.0？

回答

相關問題