我目前使用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>
当前回答
如果在任何情况下都不打算与内部元素交互，那么CSS解决方案可能对您有用。
只需将内部元素/s设置为pointer-events: none
在你的情况下:
.clickable > a {
pointer-events: none;
}
或笼统地针对所有内部元素:
.clickable * {
pointer-events: none;
}
这个简单的hack在用ReactJS开发时为我节省了很多时间
浏览器支持可以在这里找到:http://caniuse.com/#feat=pointer-events
其他回答
下面是一个对我有用的非jQuery解决方案。
< div风格= "背景:青色;宽度:100 px;" onclick="if (event.srcElement==this) {console.log('outer');} <a style="background:red" onclick="console.log('inner');我“>点击< / > < / div >
如果你在可点击的div中有多个元素，你应该这样做:
$('#clickable *').click(function(e){ e.stopPropagation(); });
下面是一个使用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();
}
var inner = document.querySelector("#inner"); var outer = document.querySelector("#outer"); inner.addEventListener('click',innerFunction); outer.addEventListener('click',outerFunction); function innerFunction(event){ event.stopPropagation(); console.log("Inner Functiuon"); } function outerFunction(event){ console.log("Outer Functiuon"); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Pramod Kharade-Event with Outer and Inner Progration</title> </head> <body> <div id="outer" style="width:100px;height:100px;background-color:green;"> <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div> </div> </body> </html>
您可以检查目标是否不是div元素，然后在父元素上发出另一个单击事件，之后您将从句柄“返回”。
$('clickable').click(function (event) {
let div = $(event.target);
if (! div.is('div')) {
div.parent().click();
return;
}
// Then Implement your logic here
}
