🖱️ Mouse Up & Down for Left, Middle, Right, & other clicks

index.html

<script>
const showCoord = (eventName, pos, e) => {
  o.innerHTML = `${eventName} "${pos}" at x: ${e.x}, y: ${e.y}`;
  e.preventDefault()
};

const onMouseEvent = eventName => e => [
  e => showCoord(eventName, "Left", e),
  e => showCoord(eventName, "Middle", e),
  e => showCoord(eventName, "Right", e),
  e => showCoord(eventName, "Back", e),
  e => showCoord(eventName, "Forward", e),
][e.button](e);

addEventListener('mousedown', onMouseEvent("Down"));
addEventListener('mouseup', onMouseEvent("Up"));
addEventListener('mousemove', onMouseEvent("Move"));
addEventListener('mouseenter', onMouseEvent("Enter"));
addEventListener('mouseout', onMouseEvent("Out"));
addEventListener('dblclick', onMouseEvent("Double Click")); //only works with Left click

//prevent context menu from appearing
addEventListener('contextmenu', e => e?.cancelable && e.preventDefault());
</script>

Move or click with Left, Middle, or Right mouse buttons on the screen to see which event was triggered and the x/y coordinate it happened at.
<p id=o></p>