如何在单击子锚点时防止触发父母的onclick事件？

我目前正在使用jQuery使div可点击，在这个div中我也有锚点。我遇到的问题是，当我单击某个锚点时，两个单击事件都已触发（对于div和锚点）。我如何防止单击锚点时触发div的onclick事件？

这是损坏的代码：

JavaScript

var 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>

#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;
});

您还可以将click事件处理程序附加到您的链接上，告诉他们在执行自己的处理程序后停止事件冒泡：

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

好答案。很高兴知道还有其他选择。

–乔纳森·沃特尼（Jonathon Watney）
09-09-2 17:42

+1！附加带有stopPropagation的单击处理程序是一个非常好的技巧，谢谢！

–托马斯
2012年3月27日12:45

如果您有一堆要防止传播的元素，则可以找到它们的父元素并阻止它在那里冒泡。因此，例如，与其拦截div中的所有a链接，不如拦截div本身上的点击，并防止其进一步升高，您就可以设置了。

–成功
2012年11月9日15:28

使用if（e.target！== this）return;父级中的e.stopPropagation（）优于子级中的e.stopPropagation（），因为您永远不知道其他人是否将某些处理程序附加到子级上，或者库是否必须将处理程序附加到子级上（并且您不希望与库代码）。这是更好的关注点分离。

–UTF_or_Death
16-10-21在17:01

把if（e.target！== this）返回;签入父项意味着如果该父项的其他任何子项都没有自己的onClick处理程序，则单击该子项，则不会发生任何事情。所以对于您有例如可点击的父div。 e.stopPropagation（）可以正常工作。

– derf26
18-4-25在16:26

#2 楼

使用stopPropagation方法，请参见示例：

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

jQuery Docs说：

stopPropagation方法可防止事件冒泡DOM
树上，防止任何父处理程序收到该事件的通知。

请记住，它不会阻止其他侦听器处理此事件（例如，更多）而不是一个按钮的单击处理程序），如果效果不理想，则必须改用stopImmediatePropagation。

当心，这样您就不会意外将事件监听器设置为被动

–加布里埃尔·彼得森（Gabriel Petersson）
7月25日20:00

#3 楼

在这里，我为所有人寻找非jQuery代码（纯javascript）的解决方案

这对我有用，我需要一个非JS / jQuery的解决方案。 10倍！

– L A
16-09-27在14:08

好答案。我刚刚直接通过了活动。因此，我没有使用MDN不鼓励使用的window.event：developer.mozilla.org/en-US/docs/Web/API/Window/event。如果您能抽出宝贵的时间，可以对使用window.event的原因进行评论（可能是2015年存在的问题，或者我无法理解原因），我们将不胜感激。

–罗布·蒙西缪斯
19年5月3日，12：30

#4 楼

如果您不打算与内部元素进行任何交互，那么CSS解决方案可能对您有用。

只需将内部元素设置为pointer-events: none

您的情况下：

.clickable > a {
    pointer-events: none;
}

或一般针对所有内部元素：

.clickable * {
    pointer-events: none;
}

这很容易在使用ReactJS开发时，hack节省了我很多时间。

浏览器支持可以在这里找到：http://caniuse.com/#feat=pointer-events

#5 楼

您也可以尝试一下

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

#6 楼

如果可点击div中有多个元素，则应执行以下操作：

$('#clickable *').click(function(e){ e.stopPropagation(); });

#7 楼

使用return false;或e.stopPropogation();将不允许执行其他代码。此时，它本身将停止流动。

是的，这很重要-自己遇到了。但是上面来自Rex的答案很有帮助-可以获取被单击的元素，并且在某些情况下，请在尝试停止的逻辑中使用此元素。 .target.nodeName还可帮助您清楚了解被击中的内容。

–Watercayman
16年5月9日在20:33

#8 楼

撰写是否有人需要（为我工作）：

event.stopImmediatePropagation()

来自此解决方案。

#9 楼

内联替代项：

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

#10 楼

这是一个使用Angular 2+的示例，例如，如果您想在用户单击外部时关闭模态组件，请执行以下操作：

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

#11 楼

您需要阻止事件到达（冒泡到）父对象（div）。
在此处查看有关冒泡的部分，并在此处查看jQuery特定的API信息。

凉。感谢您提供有关事件冒泡的信息。

–乔纳森·沃特尼（Jonathon Watney）
09年9月2日于17:40

#12 楼

 var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

#13 楼

如果在内联上下文中，请在HTML中尝试以下操作：

onclick="functionCall();event.stopPropagation();

#14 楼

您可以检查目标是否不是您的div元素，然后在父项上发出另一个click事件，然后从句柄中“返回”。

$('clickable').click(function (event) {
    let div = $(event.target);
    if (! div.is('div')) {
       div.parent().click();
       return;
    }
    // Then Implement your logic here
}

#15 楼

要将某些子元素指定为不可点击，请按照下面的示例所示编写css层次结构。

在此示例中，我停止传播到表内tr内td内td内的任何元素（*），其类为“ .subtable”。 “

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

#16 楼

如果有人使用React遇到此问题，这就是我的解决方法。

scss：

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

组件的render（）：

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

通过为子模式（内容div）添加onClick函数，可以防止鼠标单击事件到达父元素的“ closeLogin”功能。

这对我来说很成功，我能够使用2个简单的div创建一个模态效果。

#17 楼

ignoreParent（）是纯JavaScript解决方案。

它是一个中间层，用于将鼠标单击的坐标与子元素的坐标进行比较。两个简单的实现步骤：

1。在页面上放置ignoreParent（）代码。

2。而不是父级的原始onclick =“ parentEvent（）;”，请写：

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

您可以将任意数量的子级元素的ID传递给函数，并排除其他子项。

如果单击子元素之一，则不会触发父事件。如果单击父级，但未单击任何子级元素（作为参数提供），则会触发父级事件。

ignoreParent（）在Github上的代码

#18 楼

e.stopPropagation()是正确的解决方案，但是如果您不想将任何事件处理程序附加到内部锚点，则只需将此处理程序附加到外部div：

e => { e.target === e.currentTarget && window.location = URL; }

#19 楼

如果单击了子元素，则事件会上升到父元素和event.target！== event.currentTarget。
因此在您的函数中，您可以检查此项并提早返回，即：

var url = $("#clickable a").attr("href");
$("#clickable").click(function(event) {
    if ( event.target !== event.currentTarget ){
        // user clicked on a child and we ignore that
        return;
    }
    window.location = url;
    return true;
})

#20 楼

如下添加a：

<a href="http://foo.com" onclick="return false;">....</a>

，或者从return false;的点击处理程序中提取#clickable，例如：

#21 楼

所有解决方案都很复杂，而且是jscript。这是最简单的版本：

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

我认为您在“ IsChildWindow == false;”行中犯了一个错误。 -不是“ IsChildWindow = false;”吗？

– Andre Schweighofer
2012年1月26日12:31

#22 楼

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

这也会阻止链接导航。

–雷克斯M
09-09-2 17:28

是的，还是不需要什么？还是需要做一个nevegar？

– andres descalzo
09年9月2日在18:12

编程黑洞网