我目前使用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>
当前回答
如果有人需要写信(为我工作过):
event.stopImmediatePropagation()
从这个解。
其他回答
如果在任何情况下都不打算与内部元素交互，那么CSS解决方案可能对您有用。
只需将内部元素/s设置为pointer-events: none
在你的情况下:
.clickable > a {
pointer-events: none;
}
或笼统地针对所有内部元素:
.clickable * {
pointer-events: none;
}
这个简单的hack在用ReactJS开发时为我节省了很多时间
浏览器支持可以在这里找到:http://caniuse.com/#feat=pointer-events
下面是一个使用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();
}
使用stopPropagation方法，见示例:
$("#clickable a").click(function(e) {
e.stopPropagation();
});
正如jQuery文档所说:
stopPropagation方法防止事件在DOM中冒泡 树，防止任何父处理程序被通知该事件。
请记住，它不会阻止其他侦听器处理此事件(例如。)，如果不是想要的效果，你必须使用stopImmediatePropagation代替。
事件冒泡到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();
});
你也可以试试这个
$("#clickable").click(function(event) {
var senderElementName = event.target.tagName.toLowerCase();
if(senderElementName === 'div') {
// Do something here
} else {
// Do something with <a> tag
}
});
