Two differents OnClick on two divs, one over the other

Question

I have two divs, a big one and a smaller over the other, each div has its own OnClick method. The problem I have is when I clicked the smaller div, the big div's OnClick method is called too.

Who can I avoid that?

Answer 1

Your problem is that the click event will propagate up the element tree. Therefore, each element that contains an element that was clicked will also fire a click event.

The simplest solution is to add return false your handler.

If you're using jQuery, you can call e.stopPropagation(); otherwise, you'll need to call e.stopPropagation() if it exists, and set event.cancelBubble = true.

For more information, see here.

Answer 2

The best way to detect which element was clicked is to analyze target of event ( click event ). I have prepared small example for this case. You can see it in code below.

function amIclicked(e, element)
{
    e = e || event;
    var target = e.target || e.srcElement;
    if(target.id==element.id)
        return true;
    else
        return false;
}
function oneClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('One is clicked');
    }
}
function twoClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('Two is clicked');
    }
}

This javascript method can be called before you execute your script

Example

<style>
#one
{
    width: 200px;
    height: 300px;
    background-color: red;
}
#two
{
    width: 50px;
    height: 70px;
    background-color: yellow;
    margin-left: 10; 
    margin-top: 20;
}

</style>



<div id="one" onclick="oneClick(event, this);">
    one
    <div id="two" onclick="twoClick(event, this);">
        two
    </div>
</div>

I hope this helps.

Answer 3

What you're dealing with is event bubbling. Take a look at this article: http://www.quirksmode.org/js/events_order.html.

Basically, to stop the event from passing to the parent element, you can use something like this:

document.getElementById('foo').onClick = function(e) {

    // Do your stuff

    // A cross browser compatible way to stop propagation of the event:
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 4

You're running into a common case of event propagation. Check out quirksmode.org to get the full details on what exactly is happening. Basically, what you need to do in the smaller div's click handler is this:

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

Answer 5

If you decide to use a javascript library such as www.jquery.com you can easily accomplish what you are trying to do by using the propagation prevention options.

Answer 6

This worked for me in Jquery:

$('#outer_div').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("outer div 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 for the child element.