Запретить дочерним элементам захватывать обработчик кликов - PullRequest
Новая
       6

Запретить дочерним элементам захватывать обработчик кликов

0 голосов
/ 11 июня 2019

У меня есть куча div, выложенных на странице: 

singleItem: function() {
    $('.grid-item').on('click', function(e) {
      // do a bunch of stuff
      $('.grid-item').removeClass('grid-item--selected');
      $(this).addClass('grid-item--selected');
      e.stopPropagation();
    });
<div class="grid-item grid-item--selected" data-category="month-5 month-6 month-11 month-12" style="position: absolute; left: 755px; top: 0px;">
  <div class="grid-img">
    <a href="/blah/blah/blah">
      <img src="//someimg.png">
    </a>
  </div>
  <div class="grid-item--action">
    <h4 class="grid-copy grid-action">
      Product Item
    </h4>
    <a href="/blah/blah.blah">
      <button class="grid-item--action__btn" data-attr="28971">Action!</button>
    </a>
  </div>
  <a class="grid-item--corner" href="/blah/blah/blah"></a>
</div>

Когда пользователь щелкает элемент div, применяются классы, и некоторые элементы перемешиваются с помощью Packery. Однако, если я присоединяю события кликов к дочерним элементам: 

analyticsLinks: function() {
  $('a button.grid-item--action__btn').on('click', (e) => {
    e.stopPropagation();
    // make SC call
  });
  $('a.grid-item--corner').on('click', (e) => {
    e.stopPropagation();
    // make SC call
  });
}

... событие click у родительского $ ('. Grid-item') активировано. Как предотвратить применение события click, прикрепленного к родительскому элементу ('.grid-item'), к дочерним элементам $ ('a button.grid-item - action__btn') и $ ('a.grid-item- -corner ')

1 Ответ

0 голосов
/ 11 июня 2019

Я не уверен, что слежу за всей этой ситуацией. Звучит так, как будто у вас есть ящик, и вы не хотите, чтобы дети вызывали событие на родительском элементе, но родительский элемент по-прежнему активен.

Я думаю, вы хотите сделать что-то вроде: 

$('.parent').on('click', e => {
  if (e.target === this) {
    console.log('I definitely clicked `.parent`.)
  } else {
    console.log('I clicked a child of it.
  }
});

Если я неправильно понимаю, извините.

...