Home/ Questions/Q 6957031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:56:49+00:00

I have number of drop down menu’s which gets called with a onClick event

  • 0

I have number of drop down menu’s which gets called with a onClick event right below those specific div’s,and i also have a window.onclick set inorder to retract those dropdowns(which are active) when a user clicks elsewhere.

Now,when i click on a div(which has a dropDown) the drop down is getting activated(menu gets created) and simultaneously retracting (because of the window.click )

The menu’s are getting created and getting destroyed at the same time!,Any work arounds to perform the window.onclick iff the clicked element is not on of the div’s with a dropdown??

Silly question,from a beginner..
thanks in advance!!

here’s a sample code!!.. the onclick on the div is supposed to bring out the menu — and the window.onclick is supposed to retract the menu(all he menu’s which are expanded)

<html>
    <style type="text/css">
    .bar{
    width: 30px;
    height: 30px;
    background-color: black;
    display: none;
    }
    </style>
    <script type="text/javascript" >
    function fire(){
    document.getElementById("bar").style.display="block";
    }
    window.onclick=unfire;
    function unfire(){
    if(document.getElementById("bar").style.display== "block")
    document.getElementById("bar").style.display="none";
    }
    </script>
    <input type="button" value="foo" onclick="fire()">
    <div id="bar" class="bar"></div>
    </html>

Edit:added the code sample

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this will happen because of a mechanism called “Event bubbling”, which will likely not just firing your event for the specific DOM element, but will also continue to raise your event from your child DOM element(s), until it reach the very beginning of your page.

    using jquery library for example, provides us with a method to prevent this default action from happening (event.stopPropagation() ).

    I don’t know exactly if native JS code can achieve the same behavior, but let me know if you can use jQuery, and I will provide you with code example.

    thanks,

    • 0