Hey everyone. Welcome to today’s tutorial from Coding Artist. In today’s tutorial, we will learn – how to distinguish between a left, right & middle mouse click. To identify these buttons, we need HTML, CSS and Javascript.
Video Tutorial:
If you are interested in coding along to a video tutorial rather than reading this blog post, you should check out the video here down below. Also, subscribe to my youtube channel, where I post new tutorials based on web development regularly. I even post tips, tricks and resources to make your web dev journey even easier.
Project Folder Structure:
Now before we start coding. Let us take a look at the project folder structure. We create a project folder called – Left, Middle and Right Click. Inside this folder, we have three files – index.html, style.css and script.js.
HTML:
We start with the HTML code. Now copy the code provided to you below and paste it into your HTML document.
The HTML code consists of a single h1 element. This h1 element has a unique id – ‘msg’. Within the h1 tag, we have text – ‘Click Anywhere In This Document’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Left Vs Middle Vs Right 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>
<h1 id="msg">Click Anywhere In This Document</h1>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the body and the h1 element using CSS. Copy the code below and paste it into your stylesheet.
This styling has nothing to do with the functionality of the code so you can skip the CSS code altogether.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ff0066;
}
h1#msg {
position: absolute;
background-color: #ffffff;
width: 60vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-family: "Poppins", sans-serif;
text-align: center;
font-weight: 500;
font-size: 3.5vw;
padding: 1em 0.5em;
border-radius: 0.3em;
}
Javascript:
Finally, we need to implement the functionality of this code. For this we use javascript. Now copy the code below and paste it into your script file.
We declare a variable – ‘msg’ and initialize it with an h1 element with id – ‘msg’. Next, we add a ‘mouseup’ event listener to the document. We then use the ‘MouseEvent.button’ property to identify the button clicked.
Next, we use the if-else statements, to display which button is pressed in the h1 tag.
let msg = document.getElementById("msg");
document.addEventListener("mouseup", (event) => {
if (event.button == 0) {
msg.innerHTML = `<span>Left</span> Button Clicked`;
} else if (event.button == 1) {
msg.innerHTML = `<span>Middle</span> Button Clicked`;
} else if (event.button == 2) {
msg.innerHTML = `<span>Right</span> Button Clicked`;
}
});
That’s all 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!
