Как сделать клик по элементу кроме одного блока в JS?

Question

Имеется код html:

<div id="touchSideSwipe" class="touch-side-swipe d-lg-none">
...
<button class="user_region1">Не выбрано <span class="arrow1">&#8595;</span></button>
</div>

Как добавить событие на touchSideSwipe, но чтобы она не отрабатывала на button user_region1? Я пытался, у меня не получилось:

const box = $(".touch-side-swipe");
box.on("click", function (e){
    if (!$('.user_region1'))
    {
        console.log('hi');
    }
    console.log('123');
})

Answer 1

Проще всего проверить на наличие определённого класса, если его нет, то ничего делать не будем.

// Кроме класса .user_region1
if(!$(this).hasClass('user_region1')) {
  // ...
}

Демо:

$('#touchSideSwipe').on('click', 'button', function() {
  if(!$(this).hasClass('user_region1')) {
    console.log('click');
  }
});

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

<div id="touchSideSwipe" class="touch-side-swipe d-lg-none">
  <button>A</button>
  <button>B</button>
  <button>C</button>
  <button class="user_region1">Не выбрано <span class="arrow1">&#8595;</span></button>
</div>

Answer 2

В качестве альтернативы )

Если нужно задействовать именно параметр event на onClick элемента, через него можно проверить наличие у самого элемента необходимого класса, и завязать на него условие:

const box = $(".touch-side-swipe");
box.on("click", function (e){
    if (e.target.classList.contains('user_region1'))
    {
        console.log('hi');
        return false;
    }
    console.log('123');
})

БЛОГ НА HUSL

Как сделать клик по элементу кроме одного блока в JS?

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