我目前正在使用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>
事件冒泡到DOM中已附加单击事件的最高点。因此,在您的示例中,即使div中没有其他可显式单击的元素,div的每个子元素也会将其click事件冒泡到DOM上,直到DIV的click事件处理程序将其捕获为止。
有两种解决方法,就是检查谁是事件的真正发起者。jQuery将eventargs对象与事件一起传递:
$("#clickable").click(function(e) { var senderElement = e.target; // Check if sender is the <div> element e.g. // if($(e.target).is("div")) { window.location = url; return true; });
您还可以将click事件处理程序附加到您的链接,该链接告诉他们在其自己的处理程序执行后停止事件冒泡:
$("#clickable a").click(function(e) { // Do something e.stopPropagation(); });