How do I get a right click event in my web app

Question

I do not want to disable right click. I want to make it visible to my app. When I right click the event never gets to my web app and is caught by the browser itself. I expect there is a simple way to tell Chrome or Safari to not do this and let the right-click get to the app itself. People have directed me to the way javascript uses the contextmenu feature. This is NOT what I need. The right click seems to be handled by Chrome itself and never gets to my app.

score 0 · Accepted Answer · answered Jan 21 '20 at 02:38

0

Not sure what "javascript contextmenu" meant, but this should do the job:

(Run snippet and right-click black box)

let testEl = document.getElementById('test');
testEl.addEventListener('contextmenu', function(e) {
  if(e && e.preventDefault) e.preventDefault();
  alert("Right click!");
});

#test {
  width: 100px;
  height: 100px;
  background: black;
}

<div id="test"></div>

I highly doubt Chrome will prevent you from doing that. If it isn't working, it's very likely something within the app is interfering.

answered Jan 21 '20 at 02:38

fingeron

1,152
1
9
20

This sample allowed me to finally see that the context menu handling in browsers depends on whether there is actually a handler for it in the javascript code of the web app. Thanks for the simple test. It may be that others provided the same info earlier, but I did not appreciate the value. – Steve Webber Jan 22 '20 at 12:09

score 0 · Answer 2 · answered Jan 21 '20 at 02:39

As mentioned in How can I capture the right-click event in JavaScript?, you can capture the right click event without dealing with contextmenu like this:

function rightclick() {
    var rightclick;
    var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert(rightclick); // true or false, you can trap right click here by if comparison
}

How do I get a right click event in my web app

2 Answers2