How do you make onlick fire for ONLY the "top-most" div?

[BMAN99]

Hey guys,

Let's say I've got 2 divs, A and B, and each div has a separate onclick event. Div "A" is in the background, and div "B" is in the foreground, like this...

_______________________________________
|............................................................|
|........................Div A.............................|
|............................................................|
|..............___________________................|
|..............|............................|...............|
|..............|......... Div B............|...............|
|..............|__________________|...............|
|............................................................|
|............................................................|
|______________________________________|


What I want to do, is when div B is clicked on, it fires ONLY the onclick event for div B. But as it is, whenever I click on Div B, it fires the onclick event for Div B AND Div A.

So... how can I keep the div A onclick event from firing whenever I click on Div B?

[payukim]

Hi, see this:

<script type="text/javascript">
  function a(event){
    var id=event.target.id
    if(id=='a')
      alert('a')
  }
  function b(){
    alert('b')
  }
</script>
<div id="a" onclick="a(event)" style="border:1px solid black; padding:100px; width:50%">
  <div id="b" onclick="b()" style="border:1px solid red; height:100px; width:100%">
  </div>
</div>

From the code, when you click on div id=a it will call the function a(event) and alert "a", click on div id=b it will call the function b() and alert "b".

I put id=event.target.id in the function a() to get the id of the target element which got triggered. I then check such id If target id isn't "a" it will not do anything.

[BMAN99]

That is perfect, payukim. Much thanks!!!

[toicontien]

You actually want to stop the propagation of the event:

function b(event) {
  event.stopPropagation();
  event.preventDefault();
  alert("b");
}

<div id="b" onclick="b(event);">

[payukim]

I think toicontien's method is more proper and easier method. Better use his.
Thanks toicontien

[BMAN99]

Thanks toicontien! That's definitely the simplest and most elegant solution I've seen so far.

[George88]

Internet Explorer doesn't support event.target, therefore previous examples are incomplete.

You need not add event listeners to both elements because the onClick and/or mousedown event will fire when you click anywhere inside element "a".

I propose a more robust solution that works in all browsers. Simply copy & paste it, save it, and test.

<style type="text/css">
    #a {padding: 100px; display: inline-block; background: #ccc;}
    #b {color: #fff; font-size: 50pt; padding: 10px 30px 10px 30px; background: #333}
</style>

<div id="a">
    <div id="b">B</div>
</div>

<script type="text/javascript">

document.getElementById("a").addEventListener("mousedown", get_target, false);

function get_target(event)
{
    if(event.srcElement || event.target)
    {
        if((event.srcElement || event.target).id == "b")
            alert("B");
        else
            alert("A");
    }
}

</script> 

This is a much cleaner piece of code. For one it doesn't have inline scripting (scripting attached to the element) and secondly it'll work in every single browser.

You will also note that the event reserved word must be passed in to the function. If you remove it, this code will stop working in Firefox. The reason for this is simply that the event object is not a property of the window, so cannot be directly accessed from the function. Other browsers let you get away with it, but Firefox does not.

[BMAN99]

Hey George,

I really appreciate that code! Nice to have a cross-browser solution!