我目前使用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>
当前回答
下面是一个使用Angular 2+的例子
例如，如果你想关闭一个模态组件，如果用户在它外面点击:
// Close the modal if the document is clicked.
@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
this.closeModal();
}
// Don't close the modal if the modal itself is clicked.
@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
event.stopPropagation();
}
其他回答
和ev比较。当这个不可用时(React等)。
$("#clickable").click(function(e) {
if (e.target === e.currentTarget) {
window.location = url;
return true;
}
})
<a onclick="return false;" href="http://foo.example">I want to ignore my parent's onclick event.</a>
要指定某些子元素为不可点击的，请按照下面的示例编写css层次结构。
在这个例子中，我停止传播到一个类为".subtable"的表中td和tr中的任何元素(*)
$(document).ready(function()
{
$(".subtable tr td *").click(function (event)
{
event.stopPropagation();
});
});
您可以检查目标是否不是div元素，然后在父元素上发出另一个单击事件，之后您将从句柄“返回”。
$('clickable').click(function (event) {
let div = $(event.target);
if (! div.is('div')) {
div.parent().click();
return;
}
// Then Implement your logic here
}
如果它在内联上下文中，在HTML中尝试这样做:
onclick="functionCall();event.stopPropagation();
