How to Detect Click Outside Element in JavaScript

JavaScript allows you to easily work with DOM elements and handle clicks on them. Sometimes you may need to detect click outside element in JavaScript. In this article, we will learn how to detect click outside element in JavaScript.

How to Detect Click Outside Element in JavaScript

Here are the steps to detect click outside element in JavaScript. The basic idea is to capture click anywhere on the window but ignore clicks within the element itself.

For example, let us say you have a dropdown menu with id=’menucontainer’, and when you click it, you see the dropdown menu. Now when you click outside the menu, you want this menu to be hidden. For this use case, we first attach an event handler to window.click(). It is called when you click outside the menu, you can use this to hide your menu.

$(window).click(function() {
  //Hide the menus if visible
});

Alternatively, you can also use html.click() for this purpose.

$(html).click(function() {
  //Hide the menus if visible
});

The above code will be triggered no matter where you click on the window, including the menu itself. You don’t want the menu to close when you click on it. So, you need to add an event handler for click event on menu to prevent it from closing when you click on it.

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Here is the full code for your reference.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

In this article, we have learnt how to detect click outside the element. The key is to capture the click anywhere in the window using window.click or html.click but prevent clicks within the element.

Also read:

How to Capitalize First Letter in JavaScript
Python Run Shell Command & Get Output
How to Generate All Permutations of List in Python
How to Sort List of Dictionaries in Python
How to Count Occurrence Of List Item in Python