Call javascript program on body click with limitations

how to stop event bubbling in javascript
event handling in javascript with examples
addeventlistener javascript
javascript capture all events
event bubbling and capturing w3schools
javascript click event
trigger parent click event when child is clicked
javascript event object

My web project has a dropdown menu within a div element. Calling the javascript function HideDropdown hides the menu when any other main link on the page is clicked (not including links in the dropdown menu itself).

I also want to call HideDropdown() to hide the menu (if it's open) when I click anywhere on the body except the dropdown menu itself. I created a javascript click handler function, but it doesn't hide the menu (it does nothing).

Here is the new javascript click handler (placed right below the body tag):

<script>
body.onclick = function(event) {
  target = event.target;

if (target != "#dropdown-content-id") {
  if (target != "#dropdown-content-id2") {
    HideDropdown();
    };
  };
};
</script>

Here is the relevant part of the html code:

<div class="C1"><br>
<div class="dropdown">
<button class="button_01" onclick="HideDropdown();ShowDXT(2);ShowDropdown();">  Display Data Segments</button>
</div></div>

<div id="dropdown-content-id">
   <div class="C1"><button class="button_dropdown" onclick="ReadData(1)">Data   One</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ReadData(2)">Data   Two</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ReadData(3)">Data   Three</button></div>
</div>

Here is the HideDropdown function:

 <script>
 function HideDropdown() {
     $("#dropdown-content-id2").hide();
     $("#dropdown-content-id").hide();}
 </script>

I know that a body click will hide the menu, but I need to specify that it hides only if the target is not the dropdown menu itself.

Thanks very much for any ideas.

EDIT 100818:

After some work, I whittled down my problem to this: I can call the HideDropdown() function from the body tag like this:

<body onload="ShowAjax(1)" onclick="HideDropdown()">

That works. But when I change it to the same function with qualifications and (not if the click event is fired by the dropdown menu), the dev console says "TypeError: e is undefined" so it has something to do with the conditional statement:

<body onload="ShowAjax(1)" onclick="HideDropdown_B()">

<script>
function HideDropdown_B(e) {
    if(e.target.id != "dropdown-content-id" ){
        $("#dropdown-content-id2").hide();
        $("#dropdown-content-id").hide();}
}
</script>

So my problem now boils down to finding out why the new function above returns a type error when the same program without the if statement works.

<script>
var HideDropdown = function(e) {
        if(e.target.id != "dropdown-content-id" ){
            $("#dropdown-content-id2").hide();
            $("#dropdown-content-id").hide();
        }
    }

$(document).ready(
    function(){
        $('body').click(function(event) {
            target = event.target;

            if (target != "#dropdown-content-id") {
                if (target != "#dropdown-content-id2") {
                    HideDropdown(event);
                };
            };
        });
    });
</script>

I have rewritten the script contents, You need to make sure to pass the event to HideDropdown or else it won't have access to it.

<script> var HideDropdown = function(e) { if(e.target.id != "dropdown-content-id" ){ $("#dropdown-content-id2").hide();  Javascript Web Development Front End Technology The onClick event is the most frequently used event type, which occurs when a user clicks the left button of the mouse. You can put your validation, warning etc., against this event type.

Just call HideDropdown(); on each click if menu is open then it close

A program can then periodically check the queue for new events and react to When clicked with the right mouse button, the handler for the button calls When nothing in particular has focus, document.body acts as the target node of key events. To avoid the problems of having multiple threads touching the same data,  Also there are no javascript errors coming up so I don't know what's the cause Themes Podcast Articles Premium Document.body.onclick - Why Would This Not Work?

Helped in part by the excellent feedback from Brice, I solved this problem. Here is the solution:

In the body tag:

<body onload="ShowPage(1)" onclick="HideDropdown_B(event)">

The HideDropdown_B function:

<script>
function HideDropdown_B(event) {
    TargetID = event.target.getAttribute('id');
    TargetClass = event.target.getAttribute('class');
    if((TargetID != "dropdown-content-id") && (TargetClass != "button_01") &&   (TargetClass != "dropdown") && (TargetClass != "button_dropdown") ) {
   $("#dropdown-content-id2").hide();
       $("#dropdown-content-id").hide();}
}
</script>

That works to close the menu when clicking anywhere except the excluded elements.

Handlers are a way to run JavaScript code in case of user actions. a click on <​body> will generate errors, // because attributes are always strings, function ( event ) { // show event type, element and coordinates of the click alert ( event . type + " at " + event . In many cases that limitation is not pressing. Solution: The link will be open when the mouse moves over the text. It returns a newly created window, or NULL if the call gets failed. window.open ( URL, name, Specs ) Parameters: This function accepts three parameters as mentioned above and described below: URL: It is optional parameter. It is used to specify the URL of the web page which

Why does the handler on <div> run if the actual click was on <em> ? style > body * { margin : 10 px ; border : 1 px solid blue ; } </ style > < form stopPropagation() creates hidden pitfalls that later may become problems. > What I want to do is this: > > When the operator leaves the "pay_method" combo box, if it has been > changed to either "VISA" or "M-C", trigger a call to a credit card > maintenance program (CC_app) that runs on the local desktop. This > program does NOT run in a browser.

The browser MIME- type settings are often co-opted by other audio programs such as If you then load JavaScript that calls up a .wov file, your system will report an of Designing with JavaScript (O'Reilly), that plays a sound when you click on a </BODY> </HTML> Audio challenges and limitations Audio formats do not  A JavaScript function is a block of JavaScript code, that can be executed when "called" for. For example, a function can be called when an event occurs, like when the user clicks a button. You will learn much more about functions and events in later chapters.

It began as a Client-side Programming Language run inside a web browser me to open a new window" onclick="openNewWindow()"> </body> </html><script id=​"f5_cspm">(function(){var aString.split([separator, limit]): Reverse of join() . HTML, however, has several limitations. It cannot, for example, be used to make interactive web pages and it cannot be used to store data. A modern day web page (and, by extension, a website) is created by using several different languages, like XML, HTML, CSS and JavaScript. JavaScript is the language that adds interactivity to your web page.

Comments
  • Thanks, Brice, but this does not work when inserted right below the body tag. It does not seem to refer to a body click, could that be the problem?
  • Thanks, Brice. I have two questions: (1) you say to "pass the event to HideDropdown" -- is that not shown in the code above? (2) Do you disable the existing HideDropdown function? I tried this and it disables all dropdown menus. I commented out the existing HideDropdown but the problem persists. The dev console reports no errors, however.
  • 1) The code above now shows this here HideDropdown(event);, it didn't before. 2) you shouldn't have the existing HideDropdown function anymore only the one above, you're hiding the whole drop down section with $("#dropdown-content-id").hide();. I'm not sure what you want to happen? although I didn't implement these two functions so I'm not sure what they are supposed to do ShowDXT(2);ShowDropdown();
  • Brice, I edited my question above. The problem is I can call the HideDropdown function from the body tag, but with an if-statement it throws an error. Thanks for your help.
  • change onclick="HideDropdown()" to onclick="HideDropdown(event)"