如何防止在单击子锚点时激发父级的onclick事件？
如何防止在单击子锚点时激发父级的onclick事件？
提问于 2009-09-02 17:19:06
我目前正在使用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>回答 23
Stack Overflow用户
回答已采纳
发布于 2009-09-02 17:26:13
事件冒泡到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;
});您还可以将单击事件处理程序附加到您的链接，这会在它们自己的处理程序执行后告诉它们执行stop event bubbling：
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});Stack Overflow用户
发布于 2015-04-08 02:53:20
在这里，我的解决方案是给每个正在寻找非jQuery代码(纯javascript)的人。
document.getElementById("clickable").addEventListener("click", function( e ){
e = window.event || e;
if(this === e.target) {
// put your code here
}
});如果点击父母的孩子，你的代码将不会被执行
Stack Overflow用户
发布于 2017-05-04 17:07:13
如果您在任何情况下都不打算与内部元素交互，那么CSS解决方案可能对您很有用。
只需将内部元素设置为pointer-events: none
在您的案例中：
.clickable > a {
pointer-events: none;
}或者一般以所有内部元素为目标：
.clickable * {
pointer-events: none;
}在使用ReactJS进行开发时，这个简单的技巧为我节省了很多时间
浏览器支持可在此处找到：http://caniuse.com/#feat=pointer-events
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1369035
复制相关文章
相似问题
腾讯云开发者
