Calling a function after the right mouse button is pressed and released in JavaScript?

I'm using JavaScript to make a client-side applet. I need certain functionality when the left button is clicked over a certain element, and also when the right button is so clicked. The left and right functions undo each other, so symmetry in the UI is desired.

I can set an event on the left button just fine:

element.onclick = function(e) { doSomething(); }

This is nice, since it detects if the button was both pressed and released over the same element, and only fires when the button's released. That's exactly what I want. But the right button is harder. The standard way to do this appears to be this:

element.oncontextmenu = function(e) { undoSomething(); return false; }

But this behaves differently: the event happens when the button is pressed (not when it's released) and there's no check to make sure that the complete click happened over the same element. (I've tested this on both Firefox and Chromium.) Is there another event that gets fired when a complete right click happens (both down and up)? Or do I need to muck around with onmousedown and onmouseup to do all my own checking?

(Also, before someone points it out--yes, not everyone has a "right button". But that functionality isn't strictly needed, so this product should be workable with touchscreens.)

Thanks.

Use the mouseup event and determine which button was pressed in the event handler with event.button. You can also use the event.target to determine what the element that was clicked was.

AND, don't use event properties to set up events, use the modern, standard approach of .addEventListener().

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let lastElement = null;

document.addEventListener("mousedown", function(event){
  lastElement = event.target;
});

document.addEventListener("mouseup", function(event){
  // Determine which button was clicked
  let button = null;
  switch (event.button){
    case 0:
      button = "left";
      break;
    case 1:
      button = "middle";
      break;
    case 2:
      button = "right";
      break;      
  }

  console.log("You clicked and released the " + button + " button.");
  console.log("You were on the " + lastElement + " when you clicked the mouse and you were on the " + event.target + " element when you released the mouse.");
});

<!-- language: lang-html -->

<p>Try left, middle or right-clicking on an element and (without releasing the mouse) drag over to a different element and then release the mouse.</p>
<section>If you release the button while outside of the browser, the HTMLElement will be registered as the element you were on when you released the button.</section>
<br>
<div>Item One</div>
<h1>Item Two</h1>

<!-- end snippet -->