防止锚父元素的点击事件

Question

我在锚元素内部有一个 span 元素。 在 span 元素上是一个点击事件。 当我单击跨度并触发事件时，它也会触发锚父元素。

我已经用event.stopPropagation();试过了event.stopPropagation(); 但没有效果。

这是一个代码示例

标记：

<a href="#">
    <span class="child"></span>
</a>

Javascript：

var children = document.getElementsByClassName("child");

for (var i = 0; i < children.length; i++) {
    children[i].addEventListener("click", function(event) {
        event.stopPropagation();
        console.log("test");
    }, false);
}

结果：点击span事件触发点击事件函数和父锚元素。

---

这是实际的代码。

点击红色子元素会触发锚父元素和实际的点击事件。

 var deleteButtons = document.getElementsByClassName("delete"); for (var i = 0; i < deleteButtons.length; i++) { deleteButtons[i].addEventListener("click", function (event) { event.stopPropagation(); console.log("test"); }, false); }

 .container { display: flex; } a { display: flex; position: relative; align-items: center; box-sizing: border-box; height: 48px; padding: 32px; margin: 0 16px 16px 0; border-radius: 8px; background-color: #CCD0D9; text-decoration: none; z-index: 99; transition: all .2s } .text { color: #000; } .delete { position: absolute; z-index: 9999; top: 0; right: 0; height: 20px; width: 20px; background-color: tomato; }

 <div class="container"> <a href="https://www.google.com/"> <span class="text">title</span> <span class="delete"></span> </a> <a href="https://www.google.com/"> <span class="text">title</span> <span class="delete"></span> </a> <a href="https://www.google.com/"> <span class="text">title</span> <span class="delete"></span> </a> <a href="https://www.google.com/"> <span class="text">title</span> <span class="delete"></span> </a> </div>

Answer 1

event.preventDefault()就是你要找的那个。 你的标记仍然没有意义。 如果您不希望单击锚标记，请将其设为 div 或其他内容。 或者将点击功能添加到锚标签本身。