I want to use a shortcut with Ctrl+LeftMouseClick in a React project.
It works fine on my Mac with Chrome but in Firefox the shortcut triggers the right mouse click (event.button = 2). I think this is because of the MacOS Right Click function with Ctrl+LeftMouse Click.
But why does it work in Chrome and how could I get it to work in Firefox, too?
Perhaps the following Firefox console test results in plain Javascript will help you devise an appropriate React test. I observe that I can capture the ctrl-click on the trackpad in Firefox with the following listener. I notice that evt.button is always 2 for me. However if I am using a trackpad, then I can distinguish between a two-finger-press triggered right-click by looking at evt.buttons. I did not test with a mouse but I would expect that a mouse may need to be treated differently. Also, beware that I have read that the ctrl-click masquerading as right-click might be a user controlled option.
document.body.addEventListener('contextmenu', (evt) => {
if (evt.ctrlKey && evt.buttons == 1) {
console.log("ctrl-click detected");
evt.preventDefault();
}
});