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

One more way for webkit based browsers:

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

Answer 2

Just add this code :

window.event.stopPropagation();

Answer 3

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

Answer 4

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.

Answer 5

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