我目前使用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>
当前回答
内联选择:
<div>
<!-- Other content. -->
<a onclick='event.stopPropagation();' href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>
其他回答
所有的解决方案是复杂的和jscript。下面是最简单的版本:
var IsChildWindow=false;
function ParentClick()
{
if(IsChildWindow==true)
{
IsChildWindow==false;
return;
}
//do ur work here
}
function ChildClick()
{
IsChildWindow=true;
//Do ur work here
}
要指定某些子元素为不可点击的，请按照下面的示例编写css层次结构。
在这个例子中，我停止传播到一个类为".subtable"的表中td和tr中的任何元素(*)
$(document).ready(function()
{
$(".subtable tr td *").click(function (event)
{
event.stopPropagation();
});
});
内联选择:
<div>
<!-- Other content. -->
<a onclick='event.stopPropagation();' 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
您需要阻止事件到达父节点(div)(冒泡)。 请参阅此处关于冒泡的部分，以及此处特定于jquery的API信息。
