www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jul 2008
    Posts
    16

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

    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?

  2. #2
    Join Date
    Jul 2012
    Posts
    22
    Hi, see this:

    Code:
    <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.

  3. #3
    Join Date
    Jul 2008
    Posts
    16
    That is perfect, payukim. Much thanks!!!

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  5. #5
    Join Date
    Jul 2012
    Posts
    22
    I think toicontien's method is more proper and easier method. Better use his.
    Thanks toicontien

  6. #6
    Join Date
    Jul 2008
    Posts
    16
    Thanks toicontien! That's definitely the simplest and most elegant solution I've seen so far.

  7. #7
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    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.

    PHP Code:
    <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_targetfalse);

    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.

  8. #8
    Join Date
    Jul 2008
    Posts
    16
    Hey George,

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles