我目前使用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>
当前回答
这就是你要找的
mousedown事件。这适用于每个DOM元素，以防止javascript的焦点处理程序，像这样:
$('.no-focus').mousedown(function (e) {
e.prevenDefault()
// do stuff
}
在vue.js框架中，你可以这样使用修饰符:
<span @mousedown.prevent> no focus </span>
注意，使用on输入将阻止文本选择处理程序
其他回答
如果你在可点击的div中有多个元素，你应该这样做:
$('#clickable *').click(function(e){ e.stopPropagation(); });
你也可以试试这个
$("#clickable").click(function(event) {
var senderElementName = event.target.tagName.toLowerCase();
if(senderElementName === 'div') {
// Do something here
} else {
// Do something with <a> tag
}
});
如果有人需要写信(为我工作过):
event.stopImmediatePropagation()
从这个解。
添加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;
});
和ev比较。当这个不可用时(React等)。
$("#clickable").click(function(e) {
if (e.target === e.currentTarget) {
window.location = url;
return true;
}
})
