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而不是容器链接。）

Answer 1

使回调接受event参数，并查看启动事件的元素类型：

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

Answer 2

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

两种方式：

将click事件挂钩.someText并在事件对象上使用stopPropagation。
```
$(".someText").click(function(e) {
    e.stopPropagation();
});
```
在click的{{1}}处理程序中，查看.container并忽略点击e.target上的点击。
```
.someText
```
$(".container").click(function(e) { if ($(e.target).closest('.someText')[0]) { // Don't do anything } });是点击的实际元素。 e.target通过查看您为其提供的元素，然后查看其父元素等，找到与选择器匹配的第一个元素。

使用两个嵌套元素时，单击最低位置不会触发顶部单击事件

2 个答案: