Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check if the clicked element is a div or not in JavaScript?
When building interactive web applications, you often need to detect clicks on specific elements like divs. This is particularly useful for modals, dropdowns, or any clickable containers. This tutorial explores three effective methods to check if a clicked element is a div.
Using the onClick Attribute
The onClick attribute is the simplest way to detect clicks on a specific div element. You assign a function that executes when the div is clicked.
Syntax
<div onClick="clickFunction()">This is a div!</div>
<script>
function clickFunction() {
// perform operation on click
}
</script>
Example
In this example, clicking on the red div triggers the function, while clicking elsewhere has no effect.
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
background-color: red;
font-size: 3rem;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Using the onClick attribute to detect div clicks</h3>
<div onClick="clickFunction()"> This is a div! </div>
<p>Click on the red div above</p>
<p id="output"></p>
<script>
let output = document.getElementById("output");
function clickFunction() {
output.innerHTML += "Div element clicked! <br/>";
}
</script>
</body>
</html>
Using addEventListener() Method
The addEventListener() method provides more control and follows modern JavaScript practices. It allows you to attach multiple event listeners and offers better separation of HTML and JavaScript.
Syntax
<div id="testDiv">This is a div!</div>
<script>
let testDiv = document.getElementById("testDiv");
testDiv.addEventListener("click", () => {
// div is clicked
});
</script>
Example
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: lightblue;
font-size: 1rem;
padding: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Using addEventListener to detect div clicks</h3>
<div id="testDiv">This is a div! Click me.</div>
<p>Click on the blue div above</p>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let testDiv = document.getElementById("testDiv");
testDiv.addEventListener("click", () => {
output.innerHTML += "Div clicked using addEventListener! <br/>";
});
</script>
</body>
</html>
Using instanceof Operator for Any Div
The instanceof operator checks if a clicked element is a div by testing if it's an instance of HTMLDivElement. This method detects clicks on any div element on the page.
Syntax
window.addEventListener("click", function (event) {
let clickedElement = event.target;
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
// div element was clicked
}
});
Example
This example demonstrates detecting clicks on multiple div elements across the entire page.
<html>
<head>
<style>
div {
height: 80px;
width: 400px;
background-color: lightgreen;
font-size: 1rem;
margin: 10px;
padding: 15px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Using instanceof operator to detect any div click</h3>
<div>First div - click me!</div>
<div>Second div - click me too!</div>
<div>Third div - I'm clickable as well!</div>
<p>Try clicking on any div above, or click this paragraph (non-div)</p>
<p id="output"></p>
<script>
let output = document.getElementById("output");
window.addEventListener("click", function (event) {
let clickedElement = event.target;
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
output.innerHTML += "Div clicked: '" + clickedElement.textContent.substring(0, 20) + "...' <br/>";
} else {
output.innerHTML += "Non-div element clicked <br/>";
}
});
</script>
</body>
</html>
Comparison of Methods
| Method | Scope | Best For | Modern Practice |
|---|---|---|---|
| onClick attribute | Single element | Simple interactions | Basic use only |
| addEventListener() | Single element | Specific div targeting | Recommended |
| instanceof operator | All divs on page | Universal div detection | Advanced use cases |
Conclusion
Choose addEventListener() for specific div elements and the instanceof operator when you need to detect clicks on any div element. These methods provide the foundation for creating interactive web components like modals and dropdowns.
10K+ Views
