Detect click inside/outside of element with single event handler

by

Here’s a one liner that doesn’t require jquery using Node.contains:

// Get arbitrary element with id "my-element"
var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element');
// Listen for click events on body
document.body.addEventListener('click', function (event) {
    if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
        console.log('clicked inside');
    } else {
        console.log('clicked outside');
    }
});

If you’re wondering about the edge case of checking if the click is on the element itself, Node.contains returns true for the element itself (e.g. element.contains(element) === true) so this snippet should always work.

Browser support seems to cover pretty much everything according to that MDN page as well.

More Related Contents:

  1. What is wrong with this basic Javascript code? [closed]
  2. Have a pop up window when clicking on an image
  3. What is stored in variable cols in : var $cols = $(‘.sortdivs’).on(‘click’,function(){…});
  4. jQuery Event Keypress: Which key was pressed?
  5. jQuery SVG, why can’t I addClass?
  6. Setting background-image using jQuery CSS property
  7. Access outside variable in loop from Javascript closure [duplicate]
  8. JavaScript – Get Portion of URL Path
  9. Parallel asynchronous Ajax requests using jQuery
  10. How to get the background color code of an element in hex?
  11. Detect iPad users using jQuery?
  12. Testing if a checkbox is checked with jQuery
  13. Detect when a window is resized using JavaScript ?
  14. Twitter Bootstrap alert message close and open again
  15. How to read xml file contents in jQuery and display in html elements?
  16. Can I create script tag by jQuery?
  17. jQuery click anywhere in the page except on 1 div
  18. jQuery: How to detect window width on the fly?
  19. Detect fullscreen mode
  20. Count down timer with circular progress bar
  21. pass function in json and execute
  22. remove item from array using its name / value
  23. jQuery(#id).val() vs. getElementById(#id).value
  24. focus() not working in safari or chrome
  25. Find and replace specific text characters across a document with JS
  26. jQuery – Sticky header that shrinks when scrolling down
  27. How can I avoid autorepeated keydown events in JavaScript?
  28. How can I include all JavaScript files in a directory via JavaScript file?
  29. Check which element has been clicked with jQuery
  30. does location of e.preventDefault() matter

Leave a Comment