Игнор события клика

Question

При клике на кнопку "Open" выпадающий список dr_content не должен выпадать а событие click на кнопке должен срабатывать. Если кликают по dr_title то dr_content выпадать должен. Не могу найти ошибку в своем JS.

$(".dr_title *").on("click", function(e) {
    countPills = $(this).closest(".inlines_pills").length;
    console.log(countPills);
    if(countPills >= 1) {
        e.preventDefault();
    } else {
        parent = $(this).closest(".dr_item");
        sl = parent.find(".dr_content");
        if(sl.is(":hidden")) {
            parent.addClass("active");
            sl.slideDown(300);
        } else {               
            sl.slideUp(300);
            setTimeout(function() {
              parent.removeClass("active");
            },500);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="dr_title">
    <div class="inlines_pills">
        <a href="#" class="transparent_pill">Open</a>
    </div>
</div>
<div class="dr_content">
    <p>partnersTrafficPrice</p>
</div>

Answer 1

При клике на кнопку "Open" выпадающий список dr_content не должен выпадать а событие click на кнопке должен срабатывать. Если кликают по dr_title то dr_content выпадать должен.

Применительно к, приведенному автором, примеру такое можно реализовать таким образом...

$(".dr_title *").on("click", function(e) {
  if ($(e.target).hasClass('transparent_pill')) {
    alert('Клик "по кнопке" сработал')
    e.stopPropagation()
    return
  }
  $(this).parent('.dr_title').next('.dr_content').toggle()
});

.dr_title {
  border: 1px solid;
}

.dr_content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="dr_title">
  <div class="inlines_pills">
    <a href="#" class="transparent_pill">Open</a>
  </div>
</div>
<div class="dr_content">
  <p>partnersTrafficPrice</p>
</div>

БЛОГ НА HUSL

Игнор события клика

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