我有一些包含文本的可单击div。在某些情况下，文本本身是超链接。
我通常希望能够单击div并触发它的onclick动作，但是当直接单击超链接时，我只希望超链接动作而不是div onclick动作触发。
以下示例代码说明了该问题-单击超链接时，div变为红色（onclick），并且google在新标签页中打开。在这种情况下，我只希望Google在新标签页中打开。单击div上的其他任何位置时，颜色应更改为红色。
提前致谢，
丹尼斯
<div id="myDiv" style="height:60px;width:200px;border:solid" onclick="this.style.color='red';"}>
This is NOT a hyperlink.
<br><br>
<a href="https://www.google.com" target="_blank">This IS a hyperlink.</a>
</div>
您可以添加事件监听器，监听click事件，然后检查target而不是currentTarget。
您只需要检查target（被单击的实际元素）不是a标签即可。在这种情况下，您将更改currentTarget（事件侦听器所应用于的元素）的颜色。
这是一个工作片段：
document.getElementById('myDiv').addEventListener('click', (e) => {
if (!e.target.matches('a')) {
e.currentTarget.classList.add('color');
}
});div {
height: 60px;
width: 200px;
border: solid
}
.color {
color: red;
}<div id="myDiv">
This is NOT a hyperlink.
<br><br>
<a href="https://www.google.com" target="_blank">This IS a hyperlink.</a>
</div>注意-我已经修改了代码以使用正确的CSS而不是内联样式。从长远来看，这有更多的里程。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句