使用 jQuery 查找点击时最接近的元素

Question

我通过单击嵌套元素来触发函数。为了防止冒泡，我可以使用e.stopPropagation();.

如果停止传播，其他脚本就会遇到麻烦，因为它们依赖于这些元素的冒泡。还有其他方法吗？某种 if 语句？

html

<div class="nested-element">
  <div class="nested-element">
    content
  </div>
  content
</div>

现实生活中的嵌套是无限的。

jQuery

$('.selector').on('click', '.nested-element', function(e) {
    //e.stopPropagation();
    console.log($(this));
});

上面将首先输出根父元素，然后向最近的元素靠近。我只想获得最接近的元素。

Answer 1

您可以检查target，如果目标位于该类的后代实例中，则不执行任何操作

$(document).on('click', '.nested-element', function(e) {
   if(!$(e.target).closest('.nested-element').not(this).length){
     console.log('nested-element clicked =', this.id);
   }else{      
     console.log('Ignore parent event')
   }     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" class="nested-element">
  <div id="child" class="nested-element">
    child content
  </div>
  parent content
</div>