2012-02-05 108 views
3

我有一個委派父母,監聽一組具有特定類的孩子中的點擊事件。如何阻止兒童傳播活動/委託偵聽器觸發的事件?

$(".toggle_group").on("click",".toggle",function(e){ .. }); 

所以繼承人的HTML

<div class='toggle_group'> 
    <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a> 
    <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a> 
    <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a> 
    <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a> 
</div> 

問題的一個例子是,a.toggle兒童傳播完成的情況下,以父,當它不應該觸發的處理程序。根據jQuery文檔,您無法停止活動/委託事件偵聽器上的事件傳播。

如何阻止a.toggle的這些子孩子將事件傳播給父母?或者在某些情況下允許它?

您看到.toggle的內部div應該是一個下拉菜單。它不應該當你點擊菜單時切換,只有當你點擊切換鏈接時...

+1

你.off()對孩子 – frenchie 2012-02-05 22:12:40

+0

所以您選擇說與繼承的事件偵聽器的孩子應該使用過禁用它們做到這一點? – qodeninja 2012-02-06 00:33:34

+1

是的,這是一種方法。 StopPropagation是另一種方法。還有一種方法是使用on()爲子div創建一個事件監聽器,並讓它不做任何事情。 – frenchie 2012-02-06 10:13:54

回答

5

查看該頁面中的評論,至少有一些宣稱找到了解決方法。 http://api.jquery.com/event.stopPropagation/

複製從線程的評論在這裏以供將來參考:

MikeW: 工作周圍.live()事件傳播的問題。動態地創建 節點直到他們的父母有 收到它後纔會收到該事件。這會造成質樸和停止傳播,並且012DepreventDefault不會解決這個問題。修復:添加行

if(event.target!= this){return true; }

到父節點事件處理程序的頂部。當事件實際發送到 子節點時,這將停止 父事件的觸發,並且(與返回false不同)會將事件傳播到 預期節點。

3

另一種方法是,如果事件來自一個元素與.toggle類(或它的一個子),只執行你的函數處理程序,而不是.toggle_group元素本身。

$(".toggle_group").on("click",".toggle",function(e){ 
    if (!$(e.target).is(".toggle")) return; 

    ... 
}); 
相關問題