防止锚定父元素点击事件

Question

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

我已经用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 或其他内容。或将点击功能添加到锚标记本身。