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 tag instead of using 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 ();
});
|
