我目前使用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>
当前回答
下面是一个对我有用的非jQuery解决方案。
< div风格= "背景:青色;宽度:100 px;" onclick="if (event.srcElement==this) {console.log('outer');} <a style="background:red" onclick="console.log('inner');我“>点击< / > < / div >
其他回答
如果有人需要写信(为我工作过):
event.stopImmediatePropagation()
从这个解。
所有的解决方案是复杂的和jscript。下面是最简单的版本:
var IsChildWindow=false;
function ParentClick()
{
if(IsChildWindow==true)
{
IsChildWindow==false;
return;
}
//do ur work here
}
function ChildClick()
{
IsChildWindow=true;
//Do ur work here
}
事件冒泡到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();
});
如果单击子元素，则事件将弹出到父元素和事件。== event. currentarget。
所以在你的函数中，你可以检查这个并提前返回，即:
var url = $("#clickable a").attr("href");
$("#clickable").click(function(event) {
if ( event.target !== event.currentTarget ){
// user clicked on a child and we ignore that
return;
}
window.location = url;
return true;
})
如果它在内联上下文中，在HTML中尝试这样做:
onclick="functionCall();event.stopPropagation();
