При клике на дочерний элемент игнорировать клик на родителя

Question

Нужно при клике на желтую иконку с справа игнорировать клик на строку таблицы:

т.е при клике на inner_link игнорировался клик по table_row.

Пробовал так - не работает:

$(".table_3 .table_row").on("click", function(e) {
  e.preventDefault();
  innerElem = $(this).find(".inner_link");
  if (!innerElem) {
    parentBlock = $(this).closest(".table_row_wrapp");
    dropDownBlock = parentBlock.find(".table_row_dropdown");
    if (dropDownBlock.is(":hidden")) {
      dropDownBlock.slideDown(300);
    } else {
      dropDownBlock.slideUp(300);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_row">
  <div class="cell">
    <p>София</p>
  </div>
  <div class="cell">
    <p class="tag tag_2 transparent">На согласовании</p>
    <a href="#" class="inner_link"><i class="file_3"></i></a>
  </div>
</div>

Answer 1

Один из вариантов как это можно сделать:

$(".table_row").on("click", function (event) {
  const hasClass = $(event.target.closest("a")).hasClass("inner_link") 
  if (hasClass) {
    console.log("only inner_link click")
  } else {
    console.log("table_row click")  
  }
})

.table_row {
  display: table;
  padding: 14px 30px;
  border: 1px solid;
}

.inner_link {
  display: inline-block;
  background-color: orange;
  padding: 4px 20px;
  border-radius: 4px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_row">
  <div class="cell">
    <p>София</p>
  </div>
  <div class="cell">
    <p class="tag tag_2 transparent">На согласовании</p>
    <a class="inner_link"><i class="file_3">inner_link</i></a>
  </div>
</div>

БЛОГ НА HUSL

При клике на дочерний элемент игнорировать клик на родителя

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