Question

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

我已经用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事件将触发click事件功能和父锚元素。

这是实际的代码。

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

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或其他名称。或将点击功能添加到锚标记本身。

防止锚点父元素发生点击事件

1 个答案: