How can I write the JQuery equivalent of .click for middle click?

Question

There's an action I'd like to fire when a user middle-clicks on an element.

.click only captures left click (right? or at least that's the case in my experiments on firefox).

I know I can simply make a mousedown/mouseup event and detect which button was clicked, but I'm not sure if I'll be missing out various compatibility/safety/etc. features that .click has.

What .middleclick function can I write to get as close as possible to the same behavior as .click?

below are my experiments

// this does NOT work for middle-click or right-click
$("a").click(function(e) {
  e.preventDefault();
  alert(e.which);
});

// this DOES work for all three types of click (although fwiw for right-click
// it does not prevent contextual menu from coming up in FF
document.addEventListener("click", function(e){
    e.preventDefault();
    alert(e.which);
}, true);

Try adding the event handler to the document in jQuery as well, not an anchor — adeneo, Jan 22 '15 at 18:01
http://stackoverflow.com/questions/5392442/detect-middle-button-click-scroll-button-with-jquery — acontell, Jan 22 '15 at 18:04
So what is the problem? You know that middle click is a different "which" value so you need to detect it... — epascarello, Jan 22 '15 at 18:07
*"This does NOT work for middle-click or right-click"* It does for middle click. Right-click is `contextmenu`. — T.J. Crowder, Jan 22 '15 at 18:08
@epascarello good point, I clarified in a new paragraph above ("I know I can simply...") — John Bachir, Jan 22 '15 at 18:14
@JRulle could you remove the already-answered suggestion? It still shows as a yellow banner at the top of the question. — John Bachir, Jan 22 '15 at 18:20
@JohnBachir I cant remove it until the flag gets declined. good news is that the yellow banner only shows for you (not all users). — JRulle, Jan 22 '15 at 18:22

rfornal · Answer 1 · 2015-01-22T18:21:31.117

0

Try this ...

$(document).on("mousedown", function(e){
    switch(e.which)
    {
        case 1:
            alert("1");
        break;
        case 2:
            alert("2");
            -- middle button
        break;
        case 3:
            alert("3");
        break;
    }
});

jsFiddle: http://jsfiddle.net/rfornal/muqhnrt7/

Then, you can do something like this ...

$(document).on("mousedown", function(e){
    switch(e.which)
    {
        case 1:
        case 2:
            alert("left or middle button");
        break;
    }
});

jsFiddle for this one: http://jsfiddle.net/rfornal/muqhnrt7/1/

edited Jan 22 '15 at 18:21

answered Jan 22 '15 at 18:06

rfornal

5,072
5
30
42

I tested it in Chrome and IE; no issues. – rfornal Jan 22 '15 at 18:07
Can you possibly elaborate on the comment `return true;// to allow the browser to know that we handled it.`. I don't believe that really does anything, but perhaps there's something I'm not aware of. – James Montagne Jan 22 '15 at 18:16
@JamesMontagne, it's actually a comment in code I wrote a while back. I'll remove it. – rfornal Jan 22 '15 at 18:21

score 0 · Answer 2 · answered Jan 22 '15 at 18:08

0

Try to use mouseup instead of click,

$("a").mouseup(function(e) {
  e.preventDefault();
  alert(e.which);
});

answered Jan 22 '15 at 18:08

Lumi Lu

3,289
1
11
21

T.J. Crowder · Answer 3 · 2015-01-22T18:28:55.137

click works for middle-click (look for e.which === 2), on browsers that allow it (this appears not to include Firefox).

For right-click, it's the contextmenu event, which may or may not be supported by your browser.

Example:

// Responds to middle- and right-click (on browsers offering
// contextmenu), not to left-click (because of the `if`)
$("a").on("click contextmenu", function(e) {
  if (e.type === "click" && e.which === 2) {
    snippet.log("Got " + e.type + " event with e.which === 2");
  } else if (e.type === "contextmenu") {
    snippet.log("Got " + e.type + " event");
  }
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Click Me</a>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

@JohnBachir: Looks like middle-click doesn't, no. Right-click does. — T.J. Crowder, Jan 22 '15 at 18:28

score 0 · Answer 4 · answered Jan 22 '15 at 19:08

0

$('a').click(function(e) {
    e.preventDefault();
    var isMiddle = event.which == null && event.button == 4 || /* IE */
                   event.which == 2; /* Others */

    if (!isMiddle) return;

    //
    // Handle the middleclick
    //
});

answered Jan 22 '15 at 19:08

Todd

5,314
3
28
45

How can I write the JQuery equivalent of .click for middle click?

4 Answers4