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

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

<强> Live Demo

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

Answer 2

除了停止#sub元素上的传播之外，如果点击的元素实际上是#main，如果更方便的话，您可以在事件处理程序内检查#main：< / p>

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

FIDDLE

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将失败。这种方法避免了这两个问题：

$(".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/

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

4 个答案: