Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to click anywhere on the page except one element using jQuery?
We will learn to check if users have clicked anywhere on the page except one element using JavaScript and jQuery.
While working with the modals, we require to close the modal when the user clicks the outside of the modal. So, we can achieve that using various methods of JavaScript or jQuery.
Also, there are other use cases where we need to check whether users have clicked on a particular element. For example, when users click outside the dropdown menu, close the dropdown menu; Otherwise, select the option from the dropdown menu.
Here, we have different approaches to check if users have clicked anywhere on the page except for one element using jQuery.
Compare the clicked element with the unclickable element
In jQuery, we can add a click event listener on the document. So, we can listen to that event whenever the user clicks anywhere on the document.
Here, we will get the clicked element and find its id using the id property of the target object. After that, we will compare that id with the id of the unclickable element, and if both matches, that means users have clicked the unclickable element.
Syntax
Users can use the syntax below to match the id of a clicked element with the id of an unclickable element to check whether the unclickable element is clicked or not.
if (event.target.id == "unClickable") return; // unclickable element is clicked, return from the function. // perform the task on click outside.
In the above syntax, event details contain the target object for which the click event is triggered, and ‘id’ is the property of the target object.
Example
In the example below, we have created the div element and assigned the ‘unclickable’ as an id value. Afterward, whenever the user clicks on the body element, we check if the target element’s id matches with ‘the unclickable’. If both match, we will execute the return statement in the function; otherwise, we will perform some operation to handle the click event.
<html>
<head>
<style>
#unClickable {
height: 200px;
width: 600px;
background-color: aqua;
font-size: 2rem;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Comparing the clicked element with the unclickable element</h3>
<p>Click anywhere the on the page outside and inside the div element below</p>
<div id = "unClickable"> This is an unclickable div element </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('body').click((event) => {
if (event.target.id == "unClickable")
return;
output.innerHTML += "You have clicked outside the div element. <br>";
});
</script>
</body>
</html>
Using the stopPropagation() method of events
The stopPropogation() method prevents parent elements from executing any event. So, we can use the stopPropogation() method for any HTML element and add the click event to the whole document to make a particular HTML element unclickable.
Syntax
Users can follow the syntax below to click on the whole document except any single HTML element using the stopPropogation() method.
$('html').click(() =>: {
// clicking outside the div element
});
$('#modal').click(function (event) {
event.stopPropagation();
});
In the above syntax, we have added the click event on the whole document by accessing the ‘html.’ Also, we added the click event on the element containing the ‘modal’ as id and used the stopPropagation() method to prevent click.
Example
In the example below, we have created the modal. When the user opens the web page, it automatically shows the modal element. After that, when the user clicks outside the modal element, it closes the modal element, which users can observe in the output.
<html>
<head>
<style>
#modal {
height: 200px;
width: 600px;
font-size: 2rem;
border: 5px solid black;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> stopPropagation() </i> method in jQuery </h2>
<p>Below DIV element is unclickable. Click anywhere on the page </p>
<div id = "modal"> This is a modal element. </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('html').click(() => {
$('#modal').css("display", "none");
output.innerHTML = "You have clicked outside the modal."
});
$('#modal').click(function (event) {
event.stopPropagation();
});
</script>
</body>
</html>
Use the is() method of jQuery
The is() method of jQuery is used to match the two elements of HTML. Here, we will match the clicked element with the unclickable element. If both elements do not match, we will perform some operation that we want to perform on the click event.
Syntax
Users can follow the syntax below to use is() method to click outside the element.
if (!$(event.target).is('#sample_div')) {
// clicked outside
}
In the above syntax, the event.the target represents the clicked element. We have passed the ‘#sample_div’ as a parameter of is() method, representing the element with the id ‘sample_div’.
Example
In this example, we have created the small div element and applied some CSS. After that, we compare the clicked and unclickable div elements by accessing them using the id. If both will not match, we append some HTML to the webpage; Otherwise, we change the HTML of the web page.
<html>
<head>
<style>
#sample_div {
height: 170px;
width: 600px;
font-size: 2rem;
border: 3px solid green;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> is() </i>method injQuery </h2>
<p>Click anywhere on the page. Only below DIV element is unclickable.</p>
<div id = "sample_div"> This is a sample div element. </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('body').click(function (event) {
if (!$(event.target).is('#sample_div')) {
output.innerHTML += "Successfully, clicked outside the div element. <br>"
}
});
</script>
</body>
</html>
Users learned three approaches to clicking anywhere in the document except one element. The event.stopPropagation() method is a good way to make any element unclickable. Also, when the user clicks the child element, we can perform a separate operation for a child element rather than the parent.
5K+ Views
