Disable mouse middle click event with help of jQuery

Question

I am trying to disable mouse middle click event in anchor tag. It works perfectly in Chrome. Here is my code for Chrome implementation:

//prevent mouse wheel middle click for chrome 
$(document).on('auxclick', 'a', function (e) {
  if (e.which === 2) { //middle Click 
          return false;
  }
return true;
});

Note: above the implementation work only for Chrome 55 and their latest version

Reference auxclick documentation for Chrome: https://developers.google.com/web/updates/2016/10/auxclick

auxclick browser compatibility:

Reference Link: https://developer.mozilla.org/en-US/docs/Web/Events/auxclick

Unfortunately i am unable to disable mouse middle click event in rest of browser like Firefox, IE11 & Safari

I am trying to find possibility in rest of browser. Trying mousedown & mouseup event to disable mouse middle click event in rest of browser but those events don't help to achieve my expectation.

Why would you want this? There might be a valid reason, but the scroll-click is native userinterface (e.g. to quick scroll), be very careful changing that. — Martijn, Dec 07 '17 at 13:18
Possible duplicate of [How to Disable the Mouse wheel click Button?](https://stackoverflow.com/questions/11392318/how-to-disable-the-mouse-wheel-click-button) — Stavm, Dec 07 '17 at 13:19
@Stevm non of the reference not work for me. I am trying to disable in latest version of browsers. clearly explain in my question about that. — manikandan103222, Dec 07 '17 at 13:35
@Martijin they main reason is we need to prevent navigating our website in new tab if we click mouse middle click in anchor tag — manikandan103222, Dec 07 '17 at 13:40
@Martijin i agree the scroll-click is native userinface event but how we able to prevent in chrome not able to prevent in rest of browser. do you any valid reason for this. — manikandan103222, Dec 07 '17 at 14:23

JasonK · Answer 1 · 2017-12-07T14:40:11.587

1

The auxclick event is an experimental technology and therefor it has limited browser support.

You could use the mousedown event:

$('button').on('mousedown', function(e) {
    if (e.which === 2) {
      console.log('Disabled');
      return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

This should work in all major browsers, though I don't like the idea of changing native behavior.

edited Dec 07 '17 at 14:40

answered Dec 07 '17 at 14:34

JasonK

5,214
9
33
61

Thanks for your response. your code is not full fill our expectation. our expectation is prevent or disable navigation of next tab if we click mouse middle click in anchor tag ((i.e.) example). we try this way in anchor tag. the middle click event fire in if loop but not prevent/disable navigate to next tab in all major browser. – manikandan103222 Dec 08 '17 at 04:59
[`MouseEvent.which`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#properties) is non-standard technology . – DEWA Kazuyuki - 出羽和之 Oct 06 '21 at 10:08

Disable mouse middle click event with help of jQuery

1 Answers1