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 check if the clicked element is a div or not in JavaScript?
Have you ever worked with the modal or seen it on any website? When you click outside the modal, it closes the modal. We must detect whether users have clicked on or outside the modal element in such cases. If users click outside the modal element, we need to close the modal element.
In this tutorial, we will learn different ways to detect the click on the div element.
Use the onClick attribute to check if the clicked element is a div
In HTML, we can add the onClick attribute to any HTML element and assign it the function expression. Users clicking on that particular HTML element invokes the assigned function.
Syntax
Users can use the syntax below to use the onClick attribute with a div element to check whether the clicked element is a div.
<div onClick = "clickFunction()">This is a div!</div>
<script>
function clickFunction() {
// perform some operation on click
}
</script>
In the above syntax, when the user clicks on the div element, it will invoke a clickFunciton() JavaScript function.
Example
In the example below, we have created a div element and given some CSS styles. After that, we added the onClick attribute to the div as shown in the syntax and assigned the clickFunction() expression as a value.
Users can click on the div and see the outcomes. Also, they can click outside the div element, can observe that any change doesn’t occur on the web page.
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
background-color: red;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the<i> onClick attribute </i> to check if the clicked element is div or not.</h2>
<div onClick = "clickFunction()"> This is a div! </div>
<p> Please click anywhere in the above div</p>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// calling the function when the user clicks on the div element
function clickFunction() {
output.innerHTML += "Click Triggered on the div element! <br/>";
}
</script>
</body>
</html>
Use the addEventListner() method on the div element
The addEventListner() method allows us to add events on a particular HTML element. In JavaScript, we can access the HTML elements by id and add event listeners.
Here, we will pass ‘click’ as the first parameter of the adddEventListner() method, as we need to detect the click event on the div element. We pass the callback arrow function as a second parameter, which will invoke when the click event triggers on the particular div element.
Syntax
Users can follow the syntax below to use the addEventListner() method to detect the click on the div.
<div id = "testDiv"> This is a div! </div> <script> let testDiv = document.getElementById("testDiv"); testDiv.addEventListener("click", () => { // div is clicked! }); </script>
In the above syntax, we detect the click only on the div with the id “testDiv”.
Example
We have created the div element in this example and accessed it using the id in JavaScript. After that, the addEventListner() method with the click event invokes the callback function when the user clicks on the div element.
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: lightblue;
font-size: 1rem;
}
</style>
</head>
<body>
<h3>Using the <i> addEventListener method </i> to check if the clicked element is div.</h3>
<div id = "testDiv"> This is a div! </div>
<p> Please cick anywhere in the above div </p>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// access the div by id
let testDiv = document.getElementById("testDiv");
// add event listener to the div element
testDiv.addEventListener("click", () => {
output.innerHTML += "You have clicked on the div element and detected it using addEventListener! </br>";
});
</script>
</body>
</html>
Use the instanceof operator to check if the clicked element is a div
The instanceof operator allows developers to check element or variable is an instance of an object or interface. In JavaScript, HTMLDivElement is an interface, and we can check if any element belongs to the HTMLDivElement.
Here, we will add a click event on all HTML elements of a document and check if the clicked element is an instance of HTMLDivElement. If it returns true, the clicked element is the div element.
Syntax
Users can follow the syntax below to use the instanceof operator to check if the clicked element is a div element.
window.addEventListener("click", function (event) {
let clickedElement = event.target;
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
// div element is clicked
}
});
We have added the event listener in the above syntax on the whole window. The event.target returns the clicked element, and we are checking that clicked element is an instance of HTMLDivElement.
Example
The below example contains the multiple div and other HTML elements. In JavaScript, we have added the event listener for the click event on the webpage. After that, we check for every click if a clicked element is div.
When a user clicks on any div element, the below example prints a message.
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: lightblue;
font-size: 1rem;
margin: 20px;
}
</style>
</head>
<body>
<h3>Using the <i> instanceof operator </i> to check if the clicked element is div or not.</h3>
<div>Hello, users!</div>
<div> Welcome to TutorialsPoint! </div>
<div> JavaScript is easy to learn! </div>
<p id="output"></p>
<script>
let output = document.getElementById("output");
// add event listener on the whole window
window.addEventListener("click", function (event) {
let clickedElement = event.target;
// check if the clicked element is a div
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
output.innerHTML += "You have clicked the div element, and its inner HTML is " + clickedElement.innerHTML + "<br/>";
}
});
</script>
</body>
</html>
We have learned three approaches to detect the click event on the HTML div element. The first two methods detect the click on the particular div element. If users need to detect the click on every div element of the webpage, they should use the third method using the instanceof operator.
7K+ Views
