blocks|key|2751549|text|<a+onclick="return+false;"+href="http://foo.com">I+want+to+ignore+my+parent's+onclick+event.</a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2751550|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|55411|text|事件冒泡到DOM中附加了单击事件的最高点。因此，在您的示例中，即使在div中没有任何其他可显式单击的元素，div的每个子元素都会将它们的click事件冒泡到DOM中，直到DIV的click事件处理程序捕捉到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55412|有两种方法可以解决这个问题，那就是检查事件到底是谁发起的。jQuery将eventargs对象与事件一起传递：|55413|$("#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;
});|code-block|syntax|javascript|55414|您还可以将单击事件处理程序附加到您的链接，这会在它们自己的处理程序执行后告诉它们执行stop+event+bubbling：|offset|length|55415|$("#clickable+a").click(function(e)+{
+++//+Do+something
+++e.stopPropagation();
});|55416|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/category/events/event-object/#event.stopPropagation.28.29^0|0|0|0|16|J|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.

There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:

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

You can also attach a click event handler to your links which tell them to <a href="http://api.jquery.com/category/events/event-object/#event.stopPropagation.28.29" rel="noreferrer">stop event bubbling</a> after their own handler executes:

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

blocks|key|2540650|text|按如下方式添加a：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2540651|<a+href="http://foo.com"+onclick="return+false;">....</a>|code-block|syntax|javascript|2540652|或者来自#clickable的点击处理程序的return+false;，如：|2540653|++$("#clickable").click(function()+{
++++++++var+url+=+$("#clickable+a").attr("href");
++++++++window.location+=+url;
++++++++return+false;
+++});|2540654|entityMap^0|7|1|0|0|4|A|M|D|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

add <code>a</code> as follows:

<pre><code>&lt;a href="http://foo.com" onclick="return false;"&gt;....&lt;/a&gt;
</code></pre>

or <code>return false;</code> from click handler for <code>#clickable</code> like:

<pre><code> $("#clickable").click(function() {
 var url = $("#clickable a").attr("href");
 window.location = url;
 return false;
 });
</code></pre>

blocks|key|2751781|text|您需要阻止事件到达(冒泡到)父(+div)。请参阅关于冒泡here的部分，以及特定于jQuery的接口信息here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2751782|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/js/events_order.html|1|http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29^0|T|4|0|1H|4|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

You need to stop the event from reaching (bubbling to) the parent (the div).
See the part about bubbling <a href="http://www.quirksmode.org/js/events_order.html" rel="nofollow noreferrer">here</a>, and jQuery-specific API info <a href="http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29" rel="nofollow noreferrer">here</a>.

blocks|key|2751821|text|所有的解决方案都很复杂，而且都是jscript。下面是最简单的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2751822|var+IsChildWindow=false;

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


function+ChildClick()
{
++++IsChildWindow=true;
++++//Do+ur+work+here++++
}|code-block|syntax|javascript|2751823|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

All solution are complicated and of jscript. Here is the simplest version:

<pre><code>var IsChildWindow=false;

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


function ChildClick()
{
 IsChildWindow=true;
 //Do ur work here 
}
</code></pre>

blocks|key|2751858|text|如果在可单击的div中有多个元素，则应执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2751859|$('#clickable+*').click(function(e){+e.stopPropagation();+});|code-block|syntax|javascript|2751860|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you have multiple elements in the clickable div, you should do this:

<pre><code>$('#clickable *').click(function(e){ e.stopPropagation(); });
</code></pre>

blocks|key|54565|text|要将某些子元素指定为不可点击，请编写css层次结构，如下例所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54566|在这个例子中，我停止了对tr内td内的任何元素(*)的传播，该tr位于一个具有".subtable“类的表中。|54567|$(document).ready(function()
{++++
+++$(".subtable+tr+td+*").click(function+(event)
+++{
+++++++event.stopPropagation();
+++});

});|code-block|syntax|javascript|54568|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To specify some sub element as unclickable write the css hierarchy as in the example below.

In this example I stop propagation to any elements (*) inside td inside tr inside a table with the class ".subtable"

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

});
</code></pre>

blocks|key|54577|text|在这里，我的解决方案是给每个正在寻找非jQuery代码(纯javascript)的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54578|document.getElementById("clickable").addEventListener("click",+function(+e+){
++++e+=+window.event+%7C%7C+e;+
++++if(this+===+e.target)+{
++++++++//+put+your+code+here
++++}
});|code-block|syntax|javascript|54579|如果点击父母的孩子，你的代码将不会被执行|54580|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here my solution for everyone out there looking for a non-jQuery code (pure javascript)

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

Your code wont be executed if clicked on parent's childs

blocks|key|54643|text|使用return+false;或e.stopPropogation();将不允许执行更多代码。它将在这一点上停止流动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|54644|entityMap^0|2|D|G|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Using <code>return false;</code> or <code>e.stopPropogation();</code> will not allow further code to execute. It will stop flow at this point itself.

blocks|key|55552|text|你也可以试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55553|$("#clickable").click(function(event)+{
+++var+senderElementName+=+event.target.tagName.toLowerCase();
+++if(senderElementName+===+'div')
+++{
+++++++//+do+something+here+
+++}+
+++else
+++{
++++++//do+something+with+<a>+tag
+++}
});|code-block|syntax|javascript|55554|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can also try this

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

blocks|key|55562|text|如果有人需要的话就写(对我来说很有效)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55563|event.stopImmediatePropagation()|code-block|syntax|javascript|55564|来自this解决方案。|offset|length|55565|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/35472638/1201725^0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Writing if anyone needs (worked for me):

<pre><code>event.stopImmediatePropagation()
</code></pre>

From <a href="https://stackoverflow.com/a/35472638/1201725">this</a> solution.

blocks|key|55927|text|如果您在任何情况下都不打算与内部元素交互，那么CSS解决方案可能对您很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55928|只需将内部元素设置为pointer-events:+none|offset|length|style|CODE|55929|在您的案例中：|55930|.clickable+>+a+{
++++pointer-events:+none;
}|code-block|syntax|javascript|55931|或者一般以所有内部元素为目标：|55932|.clickable+*+{
++++pointer-events:+none;
}|55933|在使用ReactJS进行开发时，这个简单的技巧为我节省了很多时间|55934|浏览器支持可在此处找到：http://caniuse.com/#feat=pointer-events|55935|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=pointer-events^0|0|A|K|0|0|0|0|0|0|C|13|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

If you do not intend to interact with the inner element/s in any case, then a CSS solution might be useful for you.

Just set the inner element/s to <code>pointer-events: none</code>

in your case:

<pre><code>.clickable &gt; a {
 pointer-events: none;
}
</code></pre>

or to target all inner elements generally:

<pre><code>.clickable * {
 pointer-events: none;
}
</code></pre>

This easy hack saved me a lot of time while developing with ReactJS

Browser support could be found here: <a href="http://caniuse.com/#feat=pointer-events" rel="noreferrer">http://caniuse.com/#feat=pointer-events</a>

blocks|key|55009|text|下面是一个使用Angular+2%2B的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55010|例如，如果要在用户单击外部时关闭Modal组件：|55011|//+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();
}|code-block|syntax|javascript|55012|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here's an example using Angular 2+

For example, if you wanted to close a Modal Component if the user clicks outside of it:

<pre><code>// 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();
}
</code></pre>

blocks|key|54917|text|如果有人使用React遇到这个问题，这就是我解决它的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54918|scss：|54919|#loginBackdrop+{
position:+absolute;
width:+100%25+!important;
height:+100%25+!important;
top:0px;
left:0px;
z-index:+9;+}

#loginFrame+{
width:+$iFrameWidth;
height:+$iFrameHeight;
background-color:+$mainColor;
position:+fixed;
z-index:+10;
top:+50%25;
left:+50%25;
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;+}|code-block|syntax|javascript|54920|组件的render()：|54921|render()+{
++++...
++++return+(
++++++++<div+id='loginBackdrop'+onClick={this.props.closeLogin}>
++++++++++++<div+id='loginFrame'+onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
+++++++++++++...+[modal+content]+...
++++++++++++</div>
++++++++</div>
++++)
}|54922|通过为子模式(content+div)添加onClick函数，可以防止鼠标单击事件到达父元素的'closeLogin‘函数。|54923|这对我来说很有用，我可以用2个简单的div创建一个模式效果。|54924|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In case someone had this issue using React, this is how I solved it.

scss:

<pre><code>#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; }
</code></pre>

Component's render():

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

By a adding an onClick function for the child modal (content div) mouse click events are prevented to reach the 'closeLogin' function of the parent element.

This did the trick for me and I was able to create a modal effect with 2 simple divs.

blocks|key|55018|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55019|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");
}|code-block|syntax|javascript|55020|<!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>|55021|55022|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width"&gt;
 &lt;title&gt;Pramod Kharade-Event with Outer and Inner Progration&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer" style="width:100px;height:100px;background-color:green;"&gt;
 &lt;div id="inner" style="width:35px;height:35px;background-color:yellow;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

blocks|key|2753633|text|ignoreParent()是一个纯JavaScript解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2753634|它作为一个中间层，将鼠标单击的坐标与子元素的坐标进行比较。|2753635|1.将ignoreParent()代码放在页面上。|2753636|2.用代替父代的原始onclick="parentEvent();"，：|2753637|onclick="ignoreParent(['parentEvent()',+'child-ID']);"|code-block|syntax|javascript|2753638|您可以将任意数量的子元素的ID传递给函数，并排除其他元素。|2753639|如果您单击其中一个子元素，父事件将不会触发。如果您单击了parent，但没有单击作为参数提供的任何子元素，则会触发parent事件。|2753640|ignoreParent()+code+on+Github|2753641|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Fomtriok/ignoreParent.js/blob/master/ignoreParent.js^0|0|E|0|0|0|2|0|0|3|A|O|0|0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1G|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|W|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

ignoreParent() is a pure JavaScript solution.

It works as an intermediary layer that compares the coordinates of the mouse click with the coordinates of the child element/s. Two simple implementation steps:

1. Put the ignoreParent() code on your page.

2. Instead of the parent's original onclick="parentEvent();", write:

<pre><code>onclick="ignoreParent(['parentEvent()', 'child-ID']);"
</code></pre>

You may pass IDs of any number of child elements to the function, and exclude others.

If you clicked on one of the child elements, the parent event doesn't fire. If you clicked on parent, but not on any of the child elements [provided as arguments], the parent event is fired.

<a href="https://github.com/Fomtriok/ignoreParent.js/blob/master/ignoreParent.js" rel="nofollow noreferrer">ignoreParent() code on Github</a>

blocks|key|2542194|text|内联替代：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2542195|<div>
++++
++++<a+onclick='event.stopPropagation();'+href="http://foo.com">I+don't+want+#clickable+to+handle+this+click+event.</a>
</div>|code-block|syntax|javascript|2542196|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Inline Alternative:

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

blocks|key|55052|text|如果它在内联上下文中，那么在HTML中尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55053|onclick="functionCall();event.stopPropagation();|code-block|syntax|javascript|55054|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If it is in inline context, in HTML try this:

<pre><code>onclick="functionCall();event.stopPropagation();
</code></pre>

blocks|key|2753707|text|e.stopPropagation()是一个正确的解决方案，但如果您不想将任何事件处理程序附加到您的内部锚点，您可以简单地将此处理程序附加到您的外部div：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2753708|e+=>+{+e.target+===+e.currentTarget+&&+window.location+=+URL;+}|code-block|syntax|javascript|2753709|entityMap^0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<code>e.stopPropagation()</code> is a correct solution, but in case you don't want to attach any event handler to your inner anchor, you can simply attach this handler to your outer div:
<pre><code>e =&gt; { e.target === e.currentTarget &amp;&amp; window.location = URL; }
</code></pre>

blocks|key|2753724|text|您可以检查目标是否不是您的div-element，然后在父元素上发出另一个click事件，之后您将从句柄“返回”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753725|$('clickable').click(function+(event)+{
++++let+div+=+$(event.target);
++++if+(!+div.is('div'))+{
+++++++div.parent().click();
+++++++return;
++++}
++++//+Then+Implement+your+logic+here
}|code-block|syntax|javascript|2753726|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can check whether the target is not your div-element and then issue another click event on the parent after which you will &quot;return&quot; from the handle.
<pre><code>$('clickable').click(function (event) {
 let div = $(event.target);
 if (! div.is('div')) {
 div.parent().click();
 return;
 }
 // Then Implement your logic here
}
</code></pre>

blocks|key|56013|text|如果单击子元素，则事件会向上冒泡到父元素和event.target+!==+event.currentTarget。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|56014|因此，在您的函数中，您可以检查并提前返回，例如：|56015|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;
})|code-block|syntax|javascript|56016|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If a child element is clicked, then the event bubbles up to the parent and event.target !== event.currentTarget.
So in your function, you can check this and return early, i.e.:
<pre><code>var url = $(&quot;#clickable a&quot;).attr(&quot;href&quot;);
$(&quot;#clickable&quot;).click(function(event) {
 if ( event.target !== event.currentTarget ){
 // user clicked on a child and we ignore that
 return;
 }
 window.location = url;
 return true;
})
</code></pre>

blocks|key|55699|text|这是一个对我有效的非jQuery解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55700|​|55701|<div+style="background:cyan;+width:100px;+height:100px;"+onclick="if+(event.srcElement==this)+{console.log('outer');}">
++++<a+style="background:red"+onclick="console.log('inner');">Click+me</a>
</div>|code-block|syntax|javascript|55702|55703|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Here is a non jQuery solution that worked for me.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background:cyan; width:100px; height:100px;" onclick="if (event.srcElement==this) {console.log('outer');}"&gt;
 &lt;a style="background:red" onclick="console.log('inner');"&gt;Click me&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|56036|text|当this不可用(React等)时，我将其与ev.currentTarget进行比较。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|56037|$("#clickable").click(function(e)+{
++++if+(e.target+===+e.currentTarget)+{
++++++++window.location+=+url;
++++++++return+true;
++++}
})|code-block|syntax|javascript|56038|entityMap^0|1|4|M|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

I compare to <code>ev.currentTarget</code> when <code>this</code> is not available (React, etc).
<pre><code>$(&quot;#clickable&quot;).click(function(e) {
 if (e.target === e.currentTarget) {
 window.location = url;
 return true;
 }
})
</code></pre>

I'm currently using jQuery to make a div clickable and in this div I also have anchors. The problem I'm running into is that when I click on an anchor both click events are firing (for the div and the anchor). How do I prevent the div's onclick event from firing when an anchor is clicked?

Here's the broken code:

JavaScript

<pre><code>var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
 window.location = url;
 return true;
})
</code></pre>

HTML

<pre><code>&lt;div id="clickable"&gt;
 &lt;!-- Other content. --&gt;
 &lt;a href="http://foo.com"&gt;I don't want #clickable to handle this click event.&lt;/a&gt;
&lt;/div&gt;
</code></pre>

How do I prevent a parent's onclick event from firing when a child anchor is clicked?

jQuery

我目前正在使用jQuery来创建一个可点击的div，在这个div中我也有锚点。我遇到的问题是，当我点击一个锚时，两个点击事件都会被触发(针对div和锚)。如何防止在单击锚点时触发div的onclick事件？下面是不完整的代码：JavaScriptvar url = $("#clickable a").attr("hre...

问如何防止在单击子锚点时激发父级的onclick事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止在单击子锚点时激发父级的onclick事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止在单击子锚点时激发父级的onclick事件？
EN