How to correctly handle right click mouse event for a button

Question

I want to handle mouse right-click event for my button. I wrote the following code;

mybutton.onmousedown = e => {
    e.preventDefault();
    const mouseEvent = { 
        0: () => leftClickCallback,
        2: () => rightClickCallback
    }
    mouseEvent[ e.button ]();
}

It works fine but it doesn't prevent the browser context menu and I have to set the "oncontextmenu" event like below to prevent the browser context menu event;

mybutton.oncontextmenu = e => e.preventDefault();

I've also tried to stop propagation of mouse event like below although it didn't work:

mybutton.onmousedown = e => {
        e.preventDefault();
        e.stopPropagation(); // <====
        const mouseEvent = { 
            0: () => leftClickCallback,
            2: () => rightClickCallback
        }
        mouseEvent[ e.button ]();
}

I am wondring why I need to explicitly disable oncontextmenu event for my button.

The event `oncontextmenu` is the event that is fired when the user right clicks : https://stackoverflow.com/questions/4235426/how-can-i-capture-the-right-click-event-in-javascript — Seblor, Feb 20 '19 at 10:10
@mplungjan no this is not my question. my question is that why `preventDefault` and `stopPropagation` function in `onmousedown` doesn't prevent oncontextmenu event. — Reza, Feb 20 '19 at 10:12
Yes, why they do not cancel the click. So it is what you are asking and the answer will be in the result list. The answer COULD be "because it doesn't" — mplungjan, Feb 20 '19 at 10:13
@Seblor you mean they are two separate events which I must handle them separatly? — Reza, Feb 20 '19 at 10:14
There is one event for the left click, and an other one for the right click. You can give them the same callback, though. — Seblor, Feb 20 '19 at 10:16
@Seblor But I thought e.button === 2 and oncontextmenu event are the same. Am I wrong? — Reza, Feb 20 '19 at 10:18
I think the problem is that the right click does 2 things. It triggers a mouseDown event, *and* opens the context menu. So you might have to catch them both. — Seblor, Feb 20 '19 at 10:22
@Seblor Hmm. Then that makes sense. Do you have any reference? — Reza, Feb 20 '19 at 10:23
Don't forget the context menu can also be open with a keyboard button, it should have its own event. I can't find any official doc, but this question has the answer : https://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event — Seblor, Feb 20 '19 at 10:27
@Seblor I found this that validate your assumption. [mouse events basics](https://javascript.info/mouse-events-basics). Please write a good answer and I will accept it :) — Reza, Feb 20 '19 at 10:27

score 3 · Accepted Answer · answered Feb 20 '19 at 10:35

The right mouse button click seems to fire multiple events (though it might depend on the browser) :

a MouseDown event, with event.button === 2 and/or event.which === 3,
a ContextMenu event.

It makes sense since the context menu can also be opened by a keyboard button (depending on your keyboard layout), or a macro.

What you can do is use the same callback. For example :

function preventAll(event) {
    event.preventDefault();
    event.stopPropagation();
}

document.getElementById('something').addEventListener('mousedown', preventAll);
document.getElementById('something').addEventListener('contextmenu', preventAll);

<button id="something">test</button>

How to correctly handle right click mouse event for a button

1 Answers1