javascript - 如何在 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");});

在这里，当我单击“hello sub”文本时，会触发两个警报 -sub 和 main - 而我只想看到“sub”。我怎样才能做到这一点？

Answer 1

您可以在事件处理程序中使用event.stopPropagation来停止事件在层次结构树上sub的传播。DOM

现场演示

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

Answer 2

除了停止#sub元素上的传播之外，您还可以在事件处理程序内部检查#main单击的元素是否实际上#main更方便：

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

小提琴

Answer 3

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

Answer 4

前面的答案都可以，但我更喜欢的方法是$(event.target).closest()在容器节点的事件处理程序中检查未处理的子节点，以避免各种陷阱。event.stopPropgation()防止更高级别的容器看到事件，这通常最终是需要的。e.target如果 sub 下方有一个嵌套元素被单击而不是直接单击 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/