阻止锚点父元素点击事件

Question

我在一个锚元素中有一个span元素。在span元素上是一个click事件。当我单击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>