Updated February 21, 2023
Introduction to jQuery Click Outside Div
jQuery click outside div clicked element isn’t the container itself or a descendent of the div element. We can bind to the document’s click event and hide the div container with jQuery. A must-have feature for a dropdown menu is the ability to hide elements on click outside. It’s also useful in cases where we need to conceal a div when the user clicks outside of it.
jQuery click outside div overviews
- jQuery makes it simple to conceal a div or element when the user clicks outside of it. We can utilize the event target property to detect a click outside an element, such as a dropdown menu. This property returns the DOM element that caused the event.
- In such cases, the stop Propagation method should be avoided because it interrupts normal DOM tree event flow.
How to use jQuery click outside div?
- A must-have feature for a dropdown menu is the ability to hide elements on click outside. It’s also useful in cases where we need to conceal a div when the user clicks outside of it.
- The stop Propagation function disables event propagation to parent components. Therefore, the parent element should not be clicked when we click on a child element.
- Attach the click event handler to a region outside an element, such as the document, to detect a click outside the element. Using the jQuery nearest method in the event handler, we may determine the target for the element or an element descendent.
- We can use jQuery to listen to the click event on the html element to trigger an event when we click outside the element. We can then check which element is clicked in the event handler.
- The click event listener is then used to call click on it. $(‘html’) is used to select an html element. The target attribute returns the element that was clicked on.
- As a result, the console logs ‘clicked outside’ when we click outside the div we created. To check the user clicks on the document, we may use the jQuery mouseup method.
- The mouseup jQuery event is bound with this method. A specific element triggers that event.
- This method combines the methods on (‘mouseup,’ handler) and trigger (‘mouseup’). When the mouse pointer is over an element and the mouse button is released, the mouseup event is dispatched to that element.
- The example below shows jQuery click outside div using the mouseup method to check the user’s click on the document.
Code –
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js"></script>
<script>
$(document).mouseup(function(e)
{
var container = $("#target");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide ();
}
});
</script>
</head>
<body>
<p id = "pid"> jQuery click outside div </p>
<button id = "btn1"> jQuery Click </button>
</body>
</html>
- The wildcard selection chooses every element on a page; we can revert settings for our specific element after picking everything.
- Otherwise, we can put our element into a div, update the div’s click event handler, and apply the same logic to our specific element in that div.
- When using jQuery, we must use the stop Propagation method to determine when a click occurs outside an element.
- The stop Propagation method prevents events from being propagated to parent items. If we click on a child element, the parent element should not be clicked.
container.has (e.target).length == 0- Is determining whether the click target is a child of the container element. However, if we verify that the length is zero, this will evaluate too false when we want to see if it’s true, such as when we want to hide the container when we click on one of its parents.
jQuery click outside div delete Element
- Two approaches can hide or expose an element depending on whether the mouse is clicked outside it.
- The document should be checked first when a mouseup event is triggered. On a target click, the nearest method is invoked. In the DOM tree, this function returns the element’s first ancestor.
- The length property is applied to the result to calculate the number of ancestors. If there aren’t any ancestors, the click occurred outside the element. Then, using the hide method, the element is obscured.
- The below example shows jQuery click outside div delete Element is as follows.
Code –
<!DOCTYPE html>
<html>
<head>
<title>
Click outside div delete Element
</title>
<style>
.container {
height:200px;
width: 200px;
background-color: Red;
border: 4px solid black;
}
</style>
<script src =
"https://code.jQuery.com/jQuery-3.4.0.min.js">
</script>
</head>
<body>
<h1 style = "color: Red">
JQuery click outside div delete Element
</h1>
<b>
This example shows a click outside the div delete element.
</b>
<p> Click outside to the dive delete element. </p>
<div class = "container" style = "color:Red"> </div>
<script type="text">
$(document).mouseup(function (e) {
if ($(e.target).closest(".container").length
=== 0) {
$(".container").hide();
}
});
</script>
</body>
</html>
- The below example shows checking the content if it contains the click target. Bypassing the is and has methods with the click target, the element is tested for two things: the click does not land on the element.
- Is the method compare the current element to the specified element? The click target is supplied as a parameter, and the entire result is negated to see if the click occurred outside of the element.
Code –
<!DOCTYPE html>
<html>
<head>
<title>
Click outside div delete Element
</title>
<style>
.container {
height: 200px;
width: 200px;
background-color: red;
border: 5px solid black;
}
</style>
<script src=
"https://code.jQuery.com/jQuery-3.4.0.min.js">
</script>
</head>
<body>
<h1 style="color: red">
jQuery click outside div delete Element
</h1>
<b>
This example shows a click outside the div delete element.
</b>
<p>Click outside to the dive delete element.</p>
<div class="container" style="color:red"></div>
<script type="text/javascript">
$(document).mouseup(function (e) {
var container = $(".container");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
container.hide(); }
});
</script>
</body>
</html>
Conclusion
jQuery makes it simple to conceal a div or element when the user clicks outside of it. The div will be hidden when the user navigates away from this element. To detect click events and hide div when clicking outside a particular element, use jQuery mouseup event with the target property.
Recommended Articles
This is a guide to jQuery Click Outside Div. Here we discuss How to use jQuery click outside div along with the overview and codes. You may also look at the following articles to learn more –
