Back to: jQuery Tutorials
How to detect which mouse button is clicked using jQuery
In this article, I am going to discuss How to detect which mouse button is clicked using jQuery with Examples. Please read our previous article, where we discussed jQuery Event Object.
How to detect which mouse button is clicked using jQuery
When a mouse event occurs (such as click, mouse up, or mouse down), the event object is automatically passing to the event handler function. Now when we talk about event objects there are two flavors of them, one is raw JavaScript Event Object and another is jQuery event object. If we are using JavaScript Event Object and the browser is IE 8 or lower versions then we use event.button property to detect which mouse button is clicked.
event.button
- Left Mouse Button
- Middle Mouse Button
- Right Mouse Button
While using JavaScript Event Object, and the browser is IR 8+ or any other browser then we use event.which property to detect which mouse button is clicked
event.which
- Left Mouse Button
- Middle Mouse Button
- Right Mouse Button
Now if we have to write JavaScript code for the detection of mouse button which will be cross-browser support, then we have to code in the following way.
Using Raw JavaScript to detect which mouse button is clicked
Here in this example, if event.which property exists in the browser then it will execute the ‘if’ block. Otherwise, it will go to the else block and our event.button property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
button {
background-color: #1c4450;
border: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>How to detect which mouse button is clicked using jQuery</h1>
<div class="container">
<button onmouseup="whichMouseButtonClicked(event)">
Click me to see which button you have clicked
</button>
<p id="Result"></p>
</div>
<script type="text/javascript">
function whichMouseButtonClicked(event) {
var ButtonClicked;
if (event.which) {
switch (event.which) {
case 1:
ButtonClicked = "Left Mouse Clicked";
break;
case 2:
ButtonClicked = "Middle Mouse Clicked";
break;
case 3:
ButtonClicked = "Right Mouse Clicked";
break;
default:
ButtonClicked = "Option Not Found..";
break;
}
} else {
switch (event.button) {
case 1:
ButtonClicked = "Left Mouse Clicked";
break;
case 4:
ButtonClicked = "Middle Mouse Clicked";
break;
case 2:
ButtonClicked = "Right Mouse Clicked";
break;
default:
ButtonClicked = "Option Not Found..";
break;
}
}
document.getElementById("Result").innerHTML = ButtonClicked;
}
</script>
</body>
Now run the above code and you will get the following output in the browser.
Now right click on the mouse over the Click me to see which button you have clicked button and you will get the following output.
Now left-click on the mouse over the Click me to see which button you have clicked button and you will get the following output.
Now click on the Middle mouse over the Click me to see which button you have clicked button and you will get the following output.
Using jQuery to detect which mouse button is clicked
Now let’s see how to achieve the same functionality i.e. which mouse button is clicked using jQuery. In the below example, inside the callback of mousedown event, the event object which we are passing is a jQuery event object, not a raw JavaScript event object.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
button {
background-color: #1c4450;
border: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h1>How to detect which mouse button is clicked using jQuery</h1>
<div class="container">
<button>Click me to see which button you have clicked</button></br></br>
<p></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").mousedown(function (event) {
switch (event.which) {
case 1:
$("p").html("Left Mouse Clicked");
break;
case 2:
$("p").html("Middle Mouse Clicked");
break;
case 3:
$("p").html("Right Mouse Clicked");
break;
default:
$("p").html("Option Not Found..");
}
});
});
</script>
</body>
</html>
The above code will give you the same output as the previous example. jQuery normalizes which property of the event object is fired and it will work across all browsers. The amount of code you have to write is a lot less. Thus, jQuery provides a more efficient way.
In the next article, I am going to discuss Binding Event Handlers in jQuery using the bind and unbind method with Examples. Here, in this article, I try to explain How to detect which mouse button is clicked using jQuery with Examples and I hope you enjoy this How jQuery Detect Which Mouse Button is Clicked article.