如何在使用委託時停止事件傳播？

Question

當我使用.bind來綁定子項和父項的事件時，子項事件可以用返回false來停止事件傳播;但是當我使用委託時，返回false;不會停止事件傳播。

http://jsfiddle.net/J3EAQ/

HTML：

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

JS：

$('.parent').delegate('.child','click',function(e){ 
    alert('child click'); 
    return false; 
}); 
$('.parent').bind('click',function(e){ 
    alert('parent click'); 
}); 

Answer 1

e.stopPropagation()在這種情況下不起作用。改爲使用e.stopImmediatePropagation()。這裏有一個fiddle

Answer 2

您應該使用e.stopPropagation()，以防止傳播，而不是返回false。

return false從技術上講是兩件事; 1）防止默認動作，2）停止傳播。嘗試切換到e上的方法調用，看看是否可以解決您的問題。

Answer 3

爲什麼兩個click處理程序時，你可以有一個：

$('.parent').click(function (e) { 
    if ($(e.target).is('.child')) { 
     alert('child click'); 
    } else { 
     alert('parent click'); 
    }  
}); 

現場演示：http://jsfiddle.net/J3EAQ/2/

---

這種模式的推廣：

$(element).click(function (e) { 
    if (e.target === this) { 
     // this element was clicked directly 
    } else { 
     // this element was NOT clicked directly 
     // a descendant of this element was clicked 
    }  
}); 

---

獨立的句柄？

$('.parent').click(function (e) { 
    if (this ==== e.target) { 
     parentClicked.call(e.target, e); 
    } else { 
     childClicked.call(e.target, e); 
    }  
}); 

function childClicked(e) { 
    // child click handler 
} 

function parentClicked(e) { 
    // parent click handler 
} 

Answer 4

您可以隨時使用e.stopPropagation()

Answer 5

您的活動不被傳播。您正在綁定點擊處理程序到.parent，並且您正在點擊.parent

Answer 6

對我來說，工作原理是在點擊處理程序中檢查點擊目標的類名，你不想被其他點擊事件觸發。像這樣的東西。

if(e.target.className.toString().indexOf("product-row") > -1){ 
     // Only do stuff if the correct element was clicked 
    }