Question

我在页面上布置了一堆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
  });
}

...来自父$（'。grid-item'）的click事件被激活。如何防止附加到父项（.grid-item'）的click事件应用于子元素$（'a button.grid-item--action__btn'）和$（'a.grid-item- -corner'）？

Answer 1

我不确定我是否会跟踪整个情况。听起来好像您有一个盒子，并且您不希望孩子在父对象上触发事件，但是父对象仍然可以单击。

我认为您想做类似的事情：

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

如果我误会了，对不起。

防止子元素使用点击处理程序

1 个答案: