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


Do You Really Need Access to Advanced Scripting Capabilities?

One of the features you’ll find most commonly advertised when ...


Obvious UX Trends that will Rule 2018

For web design industry, we see new UX trends in the way we build ...


Java Programming Language And Its Application

Programming language is one of the main IT developments of the past ...


Why Can’t I Add or Install Plugins in WordPress

WordPress is a great choice when it comes to Content Management ...


5 Website Security Myths You Should Know About

Businesses today are getting increasingly dependent on their ...


Capturing HD Videos with Movavi Screen Capture Studio

As you probably know High Definition (HD) videos are regarded as the ...


Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...


Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...


Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...