How to listen to Clicks outside a DOM element using jQuery

It is sad to know the fact that DOM events or the so called JavaScript Events do not allow you to find out any clicks outside the element. One method in which you can detect clicks outside the DOM element is to listen to the clicks on the whole webpage and after that see if your targeted DOM element was present or not.

Without the use of jQuery, it actually becomes very difficult to find out the DOM element that was clicked on different browsers and yet after this also you will need to have explanation in case your control is having several layers and if either of the DOM elements has been clicked.

So to avoid all these complexities we have a much easier and simpler approach. You should first listen to all the clicks on the entire webpage  with the use of <html> tag instead of using <body> tag since the body tag will not spread throughout the webpage in case the content on your webpage is short. Once you are done with this you must listen to all the clicks on your control and put an end to the event so that it does not bubble up to the HTML handler.

Here is a piece of code that will help you easily detect a click outside an element by attaching a CLICK event to the document body that will close the window and a separate CLICK event to the window that will stop the propagation to the document body :

$('html').click (function ()
// Execute the piece of  code, such as closing a custom control or hiding a menu
$('#custom_control').click (function (event)
event.stopPropagation ();

Recently Published


What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...


5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...


8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...


The SSL certificates and why are they essential for sites

What are SSL and its purpose? SSL is a modern technology that is ...


Entering Into M-Commerce as a Small Business

According to a December 2016 Business Insider article, the U.S. ...


How to Convert More Traffic Quickly and Easily

If you’ve got a blog that gets plenty of traffic but ...


Strengthen Workplace Productivity with Live Chat Software

Live chat has become an important part of every company’s customer ...


How More Powerful Smartphones Are Making Websites Load Faster

Smartphone speeds keep accelerating. Last October, Qualcomm joined ...


The Most Effective Method To Present A Logo Plan

The Most well-known creators’ battles are and how they are ...