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

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 2

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 3

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