How to detect middle mouse button click?
All of the questions I’ve seen on how to detect a middle mouse click in JavaScript are related to jQuery, but I’m wondering how I can detect middle mouse button clicks with regular JavaScript. I tried using onClick(), but it only appears to work for the left mouse button.
Is there a JavaScript function that can detect both left and middle mouse button clicks or, if not, that can detect middle mouse button clicks?
The reason I ask is that I want to make a function call when links are clicked, irregardless of whether the left or middle mouse button was used.
onclick is not tied to a mouse, but more on the target element itself.
Here’s how to detect whether an element is middle clicked:
document.body.onclick = function (e) {
if (e && (e.which == 2 || e.button == 4 )) {
console.log('middleclicked')
}
}
You have to use stuff that’s already built into the DOM and Javascript engines and then put in cases where browsers differ (this is why jQuery is normally used).
document.getElementById("myBtn").onclick = function(event) {
event = event || window.event
// Now event is the event object in all browsers.
// Note: event.target - the reference to clicked element. IE uses event.srcElement
// In W3C there is a button property which works same in all browsers except IE:
// 0 - left button, 1 - middle button, 2 - right button
// For IE, left button = button & 1 (the 1st bit) is set to 1
// right button = button & 2 (the 2nd bit) is 1
// and middle button = button & 4 (the 3rd bit)
var left = event.button == 0 || 1 == event.button&1;
var middle = event.button == 1 || 1 == event.button&2;
var right = event.button == 2 || 1 == event.button&3;
// Put your code here
}
You’ll have to detect the event 2
event = event || window.event; //make sure to pass the event into the function
if (event.which == 2) {
//do code..
}
The code below could help you. It can detect which mouse button the user clicked. e.which == 2 is for the middle button.
<script type="text/javascript">
function detect_button(e){
e = e || window.event;
if (e.which == null){
button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
}
else{
button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
}
alert(button);
}
</script>
The answers/solutions that are already here might work on others, but it doesn’t work on me.
So my solution is: Instead of using the click event, I use the mousedown event
window.onmousedown = (event) => {
if (event.button == 1 || event.buttons == 4) {
console.log('middle mouse');
}
}
or
window.addEventListener('mousedown', (event) => {
if (event.button == 1 || event.buttons == 4) {
console.log('middle mouse');
}
});
