我目前使用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>
当前回答
事件冒泡到DOM中已附加单击事件的最高点。因此，在您的示例中，即使在div中没有任何其他显式可单击的元素，div的每个子元素都会在DOM中冒泡它们的单击事件，直到div的单击事件处理程序捕获它。
对此有两种解决方案，一是检查到底是谁发起了这个事件。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;
});
你也可以附加一个点击事件处理程序到你的链接，告诉他们在他们自己的处理程序执行后停止事件冒泡:
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});
其他回答
这里是我的解决方案，每个人都在寻找一个非jquery代码(纯javascript)
document.getElementById("clickable").addEventListener("click", function(e) {
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
如果点击父级的子级，你的代码将不会被执行
所有的解决方案是复杂的和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如下:
<a href="http://foo.example" onclick="return false;">....</a>
或者返回false;从点击处理程序#clickable像:
$("#clickable").click(function() {
var url = $("#clickable a").attr("href");
window.location = url;
return false;
});
如果有人需要写信(为我工作过):
event.stopImmediatePropagation()
从这个解。
如果你在可点击的div中有多个元素，你应该这样做:
$('#clickable *').click(function(e){ e.stopPropagation(); });
