Detect Click Outside Element JavaScript: Essential Tips

Spread the love

“Detect Click Outside Element JavaScript” means how we can listen to an event like a click or mouse focus outside of a specific element in JavaScript.

In JavaScript, adding an event listener to a specific element is easy. Once the user interacts with this element, the event is triggered, and we can take our necessary actions accordingly. This is a common scenario.

But sometimes we may want to listen to other elements rather than a specific one before deciding what to do. JS does not provide us with such a specific built-in function to act. So, we have to find alternative ways.

In this scenario, you may think to add an event listener to all other elements except for the element that you want to track. Let’s say you have hundreds or thousands of elements in your HTML document, and you want to add a click event listener to all of them. Is it possible? No, we have to think smartly.

Do it Cleverly in Two Ways:

We can group the elements and just add the event listener to the parent element only. So whenever a user clicks one of the siblings, we can track the event and check the event target to determine which element originated the click event. If it’s an outside element, then we can execute our business logic.
The second option is to add an event listener directly to the HTML body. Once a user clicks on any element within the document, we can check the event target to get the ID of the element. If the element ID is an outside element, then we can execute our business logic.

Code Example to Detect Click outside Element JavaScript

<!DOCTYPE html>
   
   <html>
      <body>
         <div id="div1" style="width: 100%;height: 50px;border:1px solid black;">DIV 1</div>
         <div id="div2" style="width: 100%;height: 50px;border:1px solid black;">DIV 2</div>
      </body>
   </html>

<script>

   document.addEventListener('click', function(event) {
   console.log(event.target);
   
   // Detect Click Outside Element JavaScript
   if(event.target.id !='div2')
      console.log('Outside Click Detected. Take Action Now .....');
   else
      console.log('Inside Click Detected. Do not take any action.');

   });

</script>

Output: Detect Click Originator using JS

Code Explanation

In the above example, we take two divs to demonstrate the example of “detect click outside element javascript”. Here, we want to track all clicks outside the DIV2 element. For example, if we click on DIV1, then we are going to detect it as an outside click event and execute our predefined business logic.

To do that, we add a click event listener to the whole document. Do not add event listeners to specific elements. This event listener will raise all click events for Div1, Div2, and the HTML body on the documents as well. If we click on DIV1, the click event will trigger. If we click on DIV2, the click event is also triggered. If we click on the body, the click event is also triggered. So we are receiving all the events. Now we need to filter out the events raised by a specific element by using some conditional logic.

Here, specifically, we want to track all outside click events rather than the DIV2 element. So once a click is initiated by the user, we check the element id by using the event.target.id property. If it’s not the DIV2 element, then we detect this click event as an outside click event, and now we can execute our logic without any hesitation.

We are hoping that you are now able to understand the logic of how to detect a click on an outside element using javascript.

You can do the same check by grouping and subgrouping your HTML elements and assigning click event listeners to the parent elements only instead of the whole document to achieve a more specific or dynamic logic implementation.

Detect click outside element JavaScript easily. Happy Coding!!