防止在元素中单击某处时的默认链接行为<a>

Question

假设我们有一个这样的结构：

document.querySelector(".container").addEventListener("click", e => {
e.stopImmediatePropagation();
}

<a href="page2.html" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
</a>

当我单击里面的div 时，它不应该转到链接。这可能吗？我已经尝试过stopImmediatePropagation()但不起作用。

但是在div 外部单击时应该<a>元素

起作用

Answer 1

如果单击的元素包含类preventGoToLinkWhenClick(或您定义的任何标准(，请使用事件侦听器来防止默认操作，否则只需返回

document.addEventListener("click", evt => {
if (evt.target.classList.contains("preventGoToLinkWhenClick")) {
evt.preventDefault();
}
return;
});

<a href=//www.google.com" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
[click to open]
</a>