how-to-detect-a-click-outside-an-element-with-jquery
jQuery

How to detect a click outside an element with jQuery

admin 0 Comments , , , ,

In this tutorial, we are going to see how to detect a click outside an element with jQuery. In jQuery, if you want to know when a click occurs outside of an element, you have to use the .stopPropagation() method.

The .stopPropagation() method prevents events from propagating to parent elements. This means “If we click on a child element, the click should not happen for the parent element.”
 

jQuery Code:
jQuery(function($){
  $('#mydiv').click(function(e){
    alert('clicked inside');
    e.stopPropagation(); // Prevent bubbling
  });
  $(document).click(function() {
    alert('clicked outside');
	});
});
 

CSS Code:
div {
    padding: 25px;
    margin: 10px;
    border: 2px solid red;
    float: left;
}

 

HTML Code:
<!DOCTYPE html>
<html>
  <head>
    <title>Detect a click outside an element with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      // Put the jQuery code Her.
    </script>
    <style type="text/css">
      /* Put the CSS Style Here */
    </style>
  </head>
  <body>
    <div id='mydiv'>Lorem ipsum</div>
  </body>
</html>
Result
Lorem ipsum
mcqMCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More

You May Also Like

how-to-find-mouse-position-relative-to-element-with-jquery

How to find mouse position relative to element with jQuery

admin 0
how-to-show-hide-div-on-selection-of-any-drop-down-value

How to show/hide DIV on selection of ANY drop-down value?

admin 1
how-to-get-the-value-of-a-select-with-jquery

How to get the value of a select with jQuery

admin 0

Leave a Reply

Your email address will not be published. Required fields are marked *