如何在单击子锚时防止父母的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>
事件冒泡到已经附加了点击事件的DOM中的最高点。 因此，在您的示例中，即使您在div中没有任何其他可显式单击的元素，div的每个子元素都会将其单击事件向上鼓起，直到DIV的click事件处理程序捕获它为止。
有两个解决方案是检查谁是真正发起事件。 jQuery传递一个eventargs对象以及事件：
$("#clickable").click(function(e) { var senderElement = e.target; // check if sender is the DIV element eg // if($(e.target).is("div")) { window.location = url; return true; });
您还可以将一个单击事件处理程序附加到您的链接，告诉他们在自己的处理程序执行后停止事件冒泡 ：
$("#clickable a").click(function(e) { //do something e.stopPropagation(); })
使用stopPropagation方法，看一个例子：
$("#clickable a").click(function(e) { e.stopPropagation(); });
正如jQuery Docs所说：
stopPropagation方法可以防止事件冒泡DOM树，从而阻止任何父处理程序被通知事件。
请记住，它不会阻止其他侦听器处理此事件 （例如，按钮的多个点击处理程序），如果这不是所需的效果，则必须使用stopImmediatePropagation 。
在这里我的解决方案为大家在那里寻找一个非jQuery代码（纯JavaScript）
document.getElementById("clickable").addEventListener("click", function( e ){ e = window.event || e; if(this === e.target) { // put your code here } });
如果点击父母的孩子，你的代码将不会被执行
你也可以试试这个
$("#clickable").click(function(event) { var senderElementName = event.target.tagName.toLowerCase(); if(senderElementName === 'div') { // do something here } else { //do something with <a> tag } });
使用return false; 或e.stopPropogation(); 将不允许进一步的代码执行。 这一点本身就会停止流动。
如果在可点击的div中有多个元素，则应该这样做：
$('#clickable *').click(function(e){ e.stopPropagation(); });
如果您不打算在任何情况下与内部元素进行交互，那么CSS解决方案可能对您有用。
只要设置内部元素/ pointer-events: none
在你的情况下：
.clickable > a { pointer-events: none; }
或通常针对所有内部元素：
.clickable * { pointer-events: none; }
这个简单的黑客为我节省了大量的时间，同时使用ReactJS进行开发
浏览器支持可以在这里找到： http : //caniuse.com/#feat=pointer-events
您需要停止事件到达（冒泡）父（div）。 请参阅这里关于冒泡的部分，以及jQuery特定的API信息。
写作如果有人需要（为我工作）：
event.stopImmediatePropagation()
从这个解决方案。
要指定某个子元素为不可点击，请按照下面的示例编写css层次结构。
在这个例子中，我停止传播任何元素（*）里面的td里面tr在一个表中的类“.subtable”
$(document).ready(function() { $(".subtable tr td *").click(function (event) { event.stopPropagation(); }); });
这里是一个使用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(); }
添加a如下：
<a href="http://foo.com" onclick="return false;">....</a>
或return false; 从#clickable点击处理程序，如：
$("#clickable").click(function() { var url = $("#clickable a").attr("href"); window.location = url; return false; });
所有的解决方案都是复杂的和jscript。 这是最简单的版本：
var IsChildWindow=false; function ParentClick() { if(IsChildWindow==true) { IsChildWindow==false; return; } //do ur work here } function ChildClick() { IsChildWindow=true; //Do ur work here }
<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>
