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 :

1
2
3
4
5
6
7
8
9
$('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

»

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 ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...

»

Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...

»

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 ...