Javascript 如何在JQuery中触发事件？

问题:

HTML:

在这里，当我单击“hello sub”文本时，会触发两个警报-sub和main-而我只想看到“sub”。如何实现这一点？

您可以在

sub

事件处理程序中使用，以停止事件向

DOM

层次结构树的传播

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

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

---

除了停止

#sub

元素上的传播外，如果单击的元素实际上是

#main

，您还可以在事件处理程序中检查

#main

，如果这样更方便的话：

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

---

前面的答案可以解决所有问题，但我首选的方法是在容器节点的事件处理程序中为未处理的子节点检查

$（event.target）.closest（）

，以避免各种错误

event.stoppropigation（）

阻止更高级别的容器查看事件，这通常是需要的。如果sub下面有嵌套元素而不是直接单击sub，则检查

e.target

将失败。这种方法避免了两个问题：

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

Fiddle w/具有独立事件处理程序的更高级别容器的示例

---

对解决方案的良好描述。向上投票。

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

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