2

I'm using pointerevents rather than mouse events to be able to have a universal pointer solution, rather than having to separately consider touch vs mouse events etc.

The problem is that when I press the right mouse button, the pointerdown event is fired normally (as expected), but when releasing it, the pointerup event is not fired (unexpectedly).

I've created a minimum reproducible case here: https://codesandbox.io/s/proud-smoke-1x2w5?file=/src/index.js

And I've created a video of the issue here: https://app.usebubbles.com/6a21646e-13d2-4a7f-a598-dfad35a9c0d3

Why does a mouse right click fire the "pointerdown" event when pressed down but not the "pointerup" event when released?

Note that this is in Chrome 81 (https://www.whatsmybrowser.org/b/VJUHP)

Tom
  • 8,536
  • 31
  • 133
  • 232

1 Answers1

1

It appears to have to do with the "contextmenu", check the snippet below, if you prevent the default behaviour then the "pointerup" event is triggered on the right click.

const app = document.getElementById("app");
const count = document.getElementById("count");

const writeCount = (n) => (count.innerHTML = n);

noContextMenu.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

let n = 0;
writeCount(0);

app.addEventListener("pointerdown", (e) => {
  writeCount(++n);
  eventType.innerHTML = "pointerdown";
});

app.addEventListener("pointerup", (e) => {
  writeCount(--n);
  eventType.innerHTML = "pointerup";
});
body {
  font-family: sans-serif;
}

#contextmenu {
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid blue;
}

#noContextMenu {
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid darkviolet;
}
<div id="app">
  <div>
    Event type: (<span id="count"></span>) <span id="eventType"></span>
  </div>
  <div id="contextmenu">context menu</div>
  <div id="noContextMenu">noContextMenu</div>
</div>
Luís Ramalho
  • 10,018
  • 4
  • 52
  • 67
  • seems like this is a chrome bug then? – Tom Apr 11 '20 at 05:24
  • I don't think so, I was trying to investigate this further. It appears that the right click is not really a "pointer event", let me update my answer with a few extra divs and then you'll see that when we log the right click event it doesn't have the type pointer, so maybe that's why "pointerup" is not triggered. – Luís Ramalho Apr 11 '20 at 05:37
  • If it's not a pointer event, then why would pointerdown be fired? – Tom Apr 11 '20 at 05:45
  • You're right, it does seem to be a pointer event :) I'll investigate this further, curious to know as well. – Luís Ramalho Apr 11 '20 at 05:49
  • Giving up for now, I think you might be right and there's a bug in Chrome when it comes to firing `pointerup` after the context menu being opened. I wonder if there's a reason for that, maybe we cannot fire pointer up while the menu is opened because then how do you detect a click on it? I'm not sure, but really curious to know. – Luís Ramalho Apr 11 '20 at 06:15
  • I feel like it should at least fire `pointercancel` in that case – Tom Apr 11 '20 at 10:57
  • I think `contextmenu` triggers `pointercancel` which indicates that no `pointerup` will be forthcoming. – Josh Hansen Aug 12 '21 at 04:34