检测带有一个孩子的元素的单击

Question

 $('.parent').on('click', function(e) { if (e.target.matches('.inside')) { console.log('inside'); } else { console.log('title'); } }); 

 .parent { background: lightgreen; } .inside { background: silver; } .title { background: gold; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='parent'> <div class='inside'> <div class='title'>lorem</div> </div> <br> </div> 

在inside单击，您将在控制台中获得title 。

如何进入inside title是否在内部？

Answer 1

您需要检查target是否具有父 .inside ：-

 $('.parent').on('click', function(e) { if ($(e.target).parents('.inside').length) { console.log('inside'); } else { console.log('title'); } }); 

 .parent { background: lightgreen; } .inside { background: silver; } .title { background: gold; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='parent'> <div class='inside'> <div class='title'>lorem</div> </div> <br> </div> 

Answer 2

好的，看看这个，看看它是否适合您？

https://codepen.io/jamie-endeavour/pen/GPjzRq?editors=1011

$('.parent').on('click', function(e) {
  var $target = $(e.target);

  if ($target.hasClass('inside') || $target.parent().hasClass('inside')) {
    console.log('inside');    
  } else {
    console.log('not inside');
  }
});

我正在检查用户是否单击了具有“内部”类的元素，或者子元素是否属于“内部”元素。

希望这可以帮助？

Answer 3

请注意，HTML在图层中起作用，因此，如果标题将位于“内部”内，则只需将标题作为点击目标，因为内部始终位于其“内部”。

 $('.title').on('click', function(e){ console.log('inside'); }); 

 .parent{ background:lightgreen; } .inside{ background:silver; } .title{ background:gold; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='parent'> <div class='inside'> <div class='title'>lorem</div> </div> <br> </div>