Запретить привязку родительского элемента к событию click - PullRequest
Новая
       24

Запретить привязку родительского элемента к событию click

0 голосов
/ 09 сентября 2018

У меня есть элемент span внутри элемента привязки. На элементе span находится событие click. Когда я щелкаю промежуток и запускаю событие, он также запускает родительский элемент привязки.

Я уже пробовал с event.stopPropagation();, но без эффекта.

Вот пример кода

Markup: 

<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>

1 Ответ

0 голосов
/ 09 сентября 2018

event.preventDefault() это то, что вы ищете.Тем не менее, ваша разметка не имеет смысла.Если вы не хотите, чтобы щелкала метка привязки, сделайте ее div или что-то в этом роде.или добавьте функцию щелчка к самому тегу привязки.

...