事件冒泡到 DOM 中已附加单击事件的最高点.因此，在您的示例中，即使 div 中没有任何其他明确可点击的元素，div 的每个子元素也会将它们的点击事件冒泡到 DOM 上，直到 DIV 的点击事件处理程序捕获它.

对此有两种解决方案，即检查事件的真正发起者.jQuery 将 eventargs 对象与事件一起传递:

$("#clickable").click(function(e) {var senderElement = e.target;//检查发件人是否为 
元素例如//if($(e.target).is("div")) {window.location = url;返回真；});
您还可以将点击事件处理程序附加到您的链接，告诉他们在他们自己的处理程序执行后停止事件冒泡:
$("#clickable a").click(function(e) {//做点什么e.stopPropagation();});

I'm currently using jQuery to make a div clickable and in this div I also have anchors. The problem I'm running into is that when I click on an anchor both click events are firing (for the div and the anchor). How do I prevent the div's onclick event from firing when an anchor is clicked?

Here's the broken code:

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>




Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.

There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:
$("#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;
});

You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:
$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});