我目前使用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输入将阻止文本选择处理程序
其他回答
事件冒泡到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();
});
<a onclick="return false;" href="http://foo.example">I want to ignore my parent's onclick event.</a>
添加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;
});
您可以检查目标是否不是div元素，然后在父元素上发出另一个单击事件，之后您将从句柄“返回”。
$('clickable').click(function (event) {
let div = $(event.target);
if (! div.is('div')) {
div.parent().click();
return;
}
// Then Implement your logic here
}
对于那些没有使用jQuery
document.querySelector('.clickable').addEventListener('click', (e) =>{
if(!e.target.classList.contains('clickable')) return
// place code here
})
