如何在JQuery中选择性触发事件？

Question

问：

HTML：

<div id="main"> 
    hello main 
    <div id="sub"> hello sub </div> 
</div> 

JS：

$("#main").on("click", function() {alert("main");}); 
$("#sub").on("click", function() {alert("sub");}); 

在这里，当我点击了 “你好子” 文本，两个警报-sub和主 - 被触发，而我想只能看到“sub”。我怎样才能做到这一点？

Answer 1

$("#sub").on("click", function(e) { //pass in event as "e" 
    e.stopPropagation(); //stop propagation from bubbling to the next element. 
    alert("sub"); 
}); 

Answer 2

您可以使用event.stopPropagation在sub事件处理程序停止活动了DOM层次树的传播。

Live Demo

$("#main").on("click", function() {alert("main");}); 
$("#sub").on("click", function(event) {event.stopPropagation();alert("sub");}); 

Answer 3

除了停止#sub元件上的传播，你可以代替事件处理中检查#main如果点击的元素实际上#main如果这是更方便：

$("#main").on("click", function(e) { 
    if (e.target === this) alert("main"); 
}); 

FIDDLE

Answer 4

以前的答案都可以工作，但我的首选方法是检查$(event.target).closest()，以查找容器节点的事件处理程序中的未处理子节点，以避免各种问题。 event.stopPropgation()可防止更高级别的容器看到事件，而事件往往最终需要。检查e.target将失败，如果有一个嵌套的元素下点击，而不是直接sub。此方法避免了这两个问题：

$(".main").on("click", function (event) { 
    if($(event.target).closest(".sub").length){ 
     return; 
    } 
    alert("main")  
}); 
$(".sub").on("click", function (event) { 
    alert("sub"); 
}); 

小提琴w /具有独立事件处理程序的高级容器的示例。

http://jsfiddle.net/rH5vj/1/