我目前使用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.example">I don't want #clickable to handle this click event.</a>
</div>
当前回答
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>
其他回答
e.s stoppropagation()是一个正确的解决方案，但如果你不想在你的内部锚上附加任何事件处理程序，你可以简单地将这个处理程序附加到你的外部div:
e => { e.target === e.currentTarget && window.location = URL; }
对于那些没有使用jQuery
document.querySelector('.clickable').addEventListener('click', (e) =>{
if(!e.target.classList.contains('clickable')) return
// place code here
})
使用返回false;或e.stopPropogation ();将不允许执行其他代码。它会在这一点停止流动。
和ev比较。当这个不可用时(React等)。
$("#clickable").click(function(e) {
if (e.target === e.currentTarget) {
window.location = url;
return true;
}
})
使用stopPropagation方法，见示例:
$("#clickable a").click(function(e) {
e.stopPropagation();
});
正如jQuery文档所说:
stopPropagation方法防止事件在DOM中冒泡 树，防止任何父处理程序被通知该事件。
请记住，它不会阻止其他侦听器处理此事件(例如。)，如果不是想要的效果，你必须使用stopImmediatePropagation代替。
