Срабатывает другое событие при клике на кнопку

Question

Есть конструкция:

<tr class="example1"> 
  <a class="example2"></a>
</tr>

В обработчике для него написано:

$('.example1').click(...); 
//Событие, если нажимаем на  строку таблицы

Еще есть событие на кнопке по тому же принципу:

$('.example2').click(...); 
//Событие, если нажимаем на  кнопку внутри строки таблицы

Проблема в том, что когда я нажимаю на кнопку example2, то срабатывает и событие для всей строки. Т.е. example1.

Как то можно этого избежать?

Answer 1

Все дело в том что клик по тегу anchor "всплывает" наверх, что бы это предотвратить можно воспользоваться методом stopPropagation():

const handleDivClick = event => {
  console.log("Click on DIV")
}

const handleAnchorClick = event => {
  event.stopPropagation()
  console.log("Click on ANCHOR")
}

$("div").on("click", handleDivClick)
$("a").on("click", handleAnchorClick)

.div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: red;
}

.div > a {
  display: inline-block;
  background-color: pink;
  padding: 10px 15px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  <a>Anchor</a>
</div>

БЛОГ НА HUSL

Срабатывает другое событие при клике на кнопку

Ответы (1 шт):