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

Question

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)

user_848250 · Answer

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;
}


  
    Event type: () 
  
  context menu
  noContextMenu

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

1 Answers