可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

just a quick question. I'm having a problem with divs with onclick javascript within each other. When I click on the inner div it should only fire it's onclick javascript, but the outer div's javascript is also being fired. How can the user click on the inner div without firing the outer div's javascript?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>

回答1:

Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

回答2:

Check out the info on event propagation here

In particular you'll want some code like this in your event handlers to stop events from propagating:

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

回答3:

Just add this code :

window.event.stopPropagation();

回答4:

return false; from the inner div's onclick function:

<div onclick="alert('inner'); return false;" ...

What you're dealing with is called event propagation.

回答5:

This is a case of event bubbling.

You can use

e.cancelBubble = true; //IE

and

e.stopPropagation(); //FF

回答6:

One more way for webkit based browsers:

<div onclick="alert('inner'); event.stopPropagation;" ...

回答7:

Here is some more reference to help you in understanding javascript event bubbling.

回答8:

you have two 'div' and three '/div'.

回答9:

This was very helpful, but it didn't work for me.

What i did is described here.

So I put a condition to the outer onclick event:

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}

回答10:

You can use

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

回答11:

This worked for me in Jquery:

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

This way, if the current target is not the same as the outer div, it will do nothing. You can implement normal functions on the child elements.