jquery - 使用两个嵌套元素，点击最低元素不会触发顶部元素的点击事件

Question

如果有三个嵌套元素：

<div class='container' fb-href='someUrl'>
   <span class='someText'>
         Lorem ipsum dolor sit amet, <a href='url'>consectetur</a> adipiscing.
   </span>
</div>

在外部 div 我有一个点击事件：

$('.container').click(function(){
   window.open($(this).attr('fb-href'));
});

如果单击 .someText 中的 url，如何避免触发事件？（因为我当然想让用户转到 a-link 而不是 container-link。）

Answer 1

让回调接受一个event参数，看看是什么元素发起了事件：

$('.container').click(function(event){
   if(event.target.tagName != 'A') {
     window.open($(this).attr('fb-href'));
   }
});

Answer 2

如果单击 .someText 中的 url，如何避免触发事件？（因为我当然想让用户转到 a-link 而不是 container-link。）

两种方式：

1. 将事件挂钩并在事件对象click上.someText使用stopPropagation。

   $(".someText").click(function(e) {
       e.stopPropagation();
   });
   

2. 在 的click处理程序中.container，查看e.target并忽略单击（如果它位于.someText.

   $(".container").click(function(e) {
       if ($(e.target).closest('.someText')[0]) {
           // Don't do anything
       }
   });
   

   e.target是实际点击的元素。closest通过查看您给它的元素，然后是它的父元素等等，找到与选择器匹配的第一个元素。