Howto: div with onclick inside another div with onclick javascript

Question

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,

Answer 1

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

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

What you're dealing with is called event propagation.

Answer 2

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;
}

Answer 3

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

Answer 4

This is a case of event bubbling.

You can use

e.cancelBubble = true; //IE

and

e.stopPropagation(); //FF

Answer 5

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();

Answer 6

You can use

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