如何在单击子锚点时,阻止父级的onclick事件触发?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (429)

我目前正在使用jQuery使div可点击,在这个div中我也有锚点。我遇到的问题是,当我点击一个锚点时,两个点击事件都会被触发(对于div和锚点)。如何在单击锚点时阻止div的onclick事件触发?

这是代码:

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>
提问于
用户回答回答于

下面是一个使用Angular 2+的例子

例如,如果你想在用户点击其外部时关闭模态组件:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}
用户回答回答于

你也可以试试这个

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动