我目前使用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.example">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();
}

其他回答

如果你在可点击的div中有多个元素,你应该这样做:

$('#clickable *').click(function(e){ e.stopPropagation(); });

要指定某些子元素为不可点击的,请按照下面的示例编写css层次结构。

在这个例子中,我停止传播到一个类为".subtable"的表中td和tr中的任何元素(*)

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

如果在任何情况下都不打算与内部元素交互,那么CSS解决方案可能对您有用。

只需将内部元素/s设置为pointer-events: none

在你的情况下:

.clickable > a {
    pointer-events: none;
}

或笼统地针对所有内部元素:

.clickable * {
    pointer-events: none;
}

这个简单的hack在用ReactJS开发时为我节省了很多时间

浏览器支持可以在这里找到:http://caniuse.com/#feat=pointer-events

var inner = document.querySelector("#inner"); var outer = document.querySelector("#outer"); inner.addEventListener('click',innerFunction); outer.addEventListener('click',outerFunction); function innerFunction(event){ event.stopPropagation(); console.log("Inner Functiuon"); } function outerFunction(event){ console.log("Outer Functiuon"); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Pramod Kharade-Event with Outer and Inner Progration</title> </head> <body> <div id="outer" style="width:100px;height:100px;background-color:green;"> <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div> </div> </body> </html>

使用stopPropagation方法,见示例:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

正如jQuery文档所说:

stopPropagation方法防止事件在DOM中冒泡 树,防止任何父处理程序被通知该事件。

请记住,它不会阻止其他侦听器处理此事件(例如。),如果不是想要的效果,你必须使用stopImmediatePropagation代替。