How to detect right mouse button release event in javascript?

Question

I am using mouseup event at the moment but it doesn't work for me.

I use mousedown event for left press and contextmenu event for right press.

Here is my code:

window.addEventListener('mouseup', e => {
  e.preventDefault();
  speedDown();
}, true);

speedDown() is a function for my sprite to slow down its speed. Left press and right press should boost the speed of my sprite in the same way. When I release the button my sprite will slow down. But using the above code when I release my left mouse button it speeds down but it doesn't speed down when I release the right button after pressing it for a few seconds, so I have to press the left button and release it in order to trigger the mouseup event.

Any suggestions?

@Huangism: No, that's ES2015 (aka "ES6"). It's an arrow function. — T.J. Crowder, Nov 20 '16 at 14:46
Sorry, can you clarify what the events are supposed to do? It's not clear at all what events are meant to speed up the sprite vs. slow it down... — T.J. Crowder, Nov 20 '16 at 14:56

score 3 · Accepted Answer · edited May 23 '17 at 12:24

Looks like you need a combination of disabling the contextmenu (if you can, some browsers don't allow it) and mouseup. Also, it's useful to make whatever the user is clicking not user-selectable (more here) so that repeated clicks don't select text.

This works for me on Chrome, see comments:

// Avoid the context menu popup
window.addEventListener("contextmenu", function(e) {
  e.preventDefault();
}, false);

// Listen for mouseup
window.addEventListener("mouseup", function(e) {
  switch (e.button) {
    case 0: // Primary button ("left")
      speedUp();
      break;
    case 2: // Secondary button ("right")
      speedDown();
      break;
  }
}, false);

// Current speed
var speed = 0;
showSpeed();

// Speed functions
function speedUp() {
  ++speed;
  showSpeed();
}

function speedDown() {
  --speed;
  showSpeed();
}

function showSpeed() {
  document.getElementById("speed").innerHTML = speed;
}

/* From https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */
body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

<div>Current speed: <span id="speed">0</span>
</div>
<div>Left-click to speed up</div>
<div>Right-click to slow down</div>

Here's a simpler example just demonstrating detecting when mouse buttons are pressed and released:

// Avoid the context menu popup
window.addEventListener("contextmenu", function(e) {
  e.preventDefault();
}, false);

// Listen for mousedown
window.addEventListener("mousedown", function(e) {
  handle(e, true);
}, false);

// Listen for mouseup
window.addEventListener("mouseup", function(e) {
  handle(e, false);
}, false);

// Our main handler
function handle(e, down) {
  var id;
  switch (e.button) {
    case 0: // Primary button ("left")
      id = "primary-status";
      break;
    case 2: // Secondary button ("right")
      id = "secondary-status";
      break;
  }
  if (id) {
    document.getElementById(id).innerHTML = down ? "Down" : "Up";
  }
}

/* From https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */
body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

<div>
  Primary ("left") mouse button:
  <span id="primary-status">Unknown</span>
</div>
<div>
  Secondary ("right") mouse button:
  <span id="secondary-status">Unknown</span>
</div>

Side note: Many users configure their mice so that holding both buttons down simulates the middle button (e.button == 1). You may need to handle that...

Oh I never even thought about the event on mouseup, good one. I think OP just wants to speed down on left or right release, but your answer answers that anyway — Huangism, Nov 20 '16 at 14:54
@Huangism: Hmmm, re-reading the question, you may well be right, I can't tell. :-) — T.J. Crowder, Nov 20 '16 at 14:55
I want to speedUp when click and speedDown when release the left or right button. — newguy, Nov 20 '16 at 14:56
@newguy: "click" means "press and release." Do you mean you want to speed up on `mousedown` and slow down on `mouseup`? Repeatedly, or just once? — T.J. Crowder, Nov 20 '16 at 14:57
Sorry I haven't described accurately. I mean press the button. I can handle the press very well. And I can also handle the left button release very well. But I can't make the right button release event work correctly. — newguy, Nov 20 '16 at 14:59
@newguy: Okay. The above shows how to handle releasing the right mouse button. You have to disable `contextmenu`, and then you can handle it in `mouseup`. — T.J. Crowder, Nov 20 '16 at 15:01
If I disable the `contextmenu` event how can I do a normal speedUp with pressing the right mouse button? — newguy, Nov 20 '16 at 15:06

How to detect right mouse button release event in javascript?

1 Answers1