当单击子锚时，如何防止父级单击事件触发？

Question

当单击子锚时，如何防止父级单击事件触发？我目前正在使用jQuery使div可点击，在这个div中我也有锚。我遇到的问题是，当我单击一个锚时，两个单击事件都会触发(对于div和锚)。当单击锚时，如何防止div的onClick事件触发？这是破译的代码：JavaScriptvar url = $("#clickable a").attr("href");$("#clickable").click(function() {     window.location = url;     return true;})HTML<div id="clickable">     <!-- Other content. -->     <a href="http://foo.com">I don't want #clickable to handle this click event.</a></div>

Answer 1

事件冒泡到DOM中附加单击事件的最高点。因此，在您的示例中，即使您在div中没有任何其他显式可单击元素，div的每个子元素都会将它们的Click事件泡到DOM上，直到DIV的Click事件处理程序捕获它为止。

这有两种解决方案，一种是检查究竟是谁发起了这一事件。jQuery与事件一起传递一个eventargs对象：

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;});

您还可以将一个单击事件处理程序附加到您的链接上，这些链接告诉它们停止事件冒泡在它们自己的处理程序执行之后：

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();});

Answer 2

使用停止传播方法，请参见示例：

$("#clickable a").click(function(e) {
   e.stopPropagation();});

正如jQueryDocs所说：

stopPropagation方法防止事件在DOM树上冒泡，从而防止任何父处理程序被通知该事件。

请记住，它没有阻止其他侦听器处理此事件(前。一个按钮的多个单击处理程序)，如果它不是所期望的效果，则必须使用stopImmediatePropagation相反。

Answer 3

这里是我的解决方案，每个人都在寻找非jQuery代码(纯javascript)。

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }});

如果单击父级的子类，则不会执行您的代码