Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to detect if a click is inside or outside an element. To create this, we need HTML, CSS and Javascript. The code is super easy and quick to implement.
Video Tutorial:
If you prefer to learn by coding along to a video tutorial rather than reading this blog post, you can check out the video tutorial here down below. Also, check out my youtube channel where I post new tips, tricks and tutorials related to web development regularly. So subscribe to my youtube channel so you don’t miss out on any of the amazing resources.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We create a project folder – “Detect Click”. Inside this folder, we have three files – index.html, style.css and script.js. These are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML code. First, copy the code provided to you below and paste it into your HTML document.
The HTML code consists of a div with a class name container to centre and wraps the other elements. Inside the container, we have a div with id – ‘our-elem’. This is our reference element for determining the clicks. Inside this div, we even have some child elements.
They can be any elements of your choice. I have used button and span just for demo purposes.
At last, we have a ‘p’ element with id-“message”. We would display the text saying if the click was inside/outside in this ‘p’ element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect Click</title>
<!-- Google Font-->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="our-elem">
<span>Our Elem</span>
<button>Child Elem</button>
</div>
<p id="message">Try Clicking Anywhere!!</p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Let us add style to the elements. To do this, copy the code below and paste it into your stylesheet. You can completely skip the CSS as it is only for styling and has nothing to do with the working of the code.
Finally, we need to implement the functionality. Now copy the code below and paste it into your script file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: grid;
background-color: #6b72e7;
place-items: center;
}
#our-elem {
background-color: #ffffff;
height: 200px;
width: 200px;
border-radius: 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1em;
font-size: 1.5em;
}
#our-elem button {
font-size: 0.8em;
padding: 0.6em;
background-color: #6b72e7;
border: none;
color: #ffffff;
border-radius: 5px;
}
#message {
font-size: 1.5em;
margin-top: 1.5em;
padding: 0.5em;
text-align: center;
background-color: #000000;
color: #ffffff;
border-radius: 5px;
}
#message span {
color: #6b72e7;
font-style: italic;
}
Javascript:
We start our javascript code by declaring two variables – ‘ourElem’ and ‘message’. We initialize them to our reference element and the ‘p’ element respectively.
Next, we add a click event listener to the document body. When the user clicks anywhere on the document body, we check if the clicked element is the same as that of our reference element. If yes, we display the message – ‘Click is Inside the element’. If not, we output – ‘Click is Outside the element’.
In case the user clicks on a child node, we repeat this step of checking till we reach the parent node i.e our element.
let ourElem = document.getElementById("our-elem");
let message = document.getElementById("message");
document.addEventListener("click", (e) => {
let clickedElem = e.target;
do {
if (clickedElem == ourElem) {
message.innerHTML = `Click Is <span>Inside</span> The Element`;
return;
}
clickedElem = clickedElem.parentNode;
} while (clickedElem);
message.innerHTML = `Click is <span>Outside</span> The Element`;
});
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, I would love to hear from you guys, so if you have any queries, suggestions, or feedback comment below.
Happy Coding!
