我目前使用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>
当前回答
如果在任何情况下都不打算与内部元素交互，那么CSS解决方案可能对您有用。
只需将内部元素/s设置为pointer-events: none
在你的情况下:
.clickable > a {
pointer-events: none;
}
或笼统地针对所有内部元素:
.clickable * {
pointer-events: none;
}
这个简单的hack在用ReactJS开发时为我节省了很多时间
浏览器支持可以在这里找到:http://caniuse.com/#feat=pointer-events
其他回答
要指定某些子元素为不可点击的，请按照下面的示例编写css层次结构。
在这个例子中，我停止传播到一个类为".subtable"的表中td和tr中的任何元素(*)
$(document).ready(function()
{
$(".subtable tr td *").click(function (event)
{
event.stopPropagation();
});
});
如果你在可点击的div中有多个元素，你应该这样做:
$('#clickable *').click(function(e){ e.stopPropagation(); });
这里是我的解决方案，每个人都在寻找一个非jquery代码(纯javascript)
document.getElementById("clickable").addEventListener("click", function(e) {
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
如果点击父级的子级，你的代码将不会被执行
使用stopPropagation方法，见示例:
$("#clickable a").click(function(e) {
e.stopPropagation();
});
正如jQuery文档所说:
stopPropagation方法防止事件在DOM中冒泡 树，防止任何父处理程序被通知该事件。
请记住，它不会阻止其他侦听器处理此事件(例如。)，如果不是想要的效果，你必须使用stopImmediatePropagation代替。
<a onclick="return false;" href="http://foo.example">I want to ignore my parent's onclick event.</a>
