Is Right Click a JavaScript Event

How can I capture the right-click event in JavaScript?

Use the oncontextmenu event.

Here's an example:

<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>

And using event listeners (credit to rampion from a comment in 2011):

el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

Don't forget to return false, otherwise the standard context menu will still pop up.

If you are going to use a function you've written rather than javascript:alert("Success!"), remember to return false in BOTH the function AND the oncontextmenu attribute.

Is right click a Javascript event?

As others have mentioned, the right mouse button can be detected through the usual mouse events (mousedown, mouseup, click). However, if you're looking for a firing event when the right-click menu is brought up, you're looking in the wrong place. The right-click/context menu is also accessible via the keyboard (shift+F10 or context menu key on Windows and some Linux). In this situation, the event that you're looking for is oncontextmenu:

window.oncontextmenu = function ()
{
    showCustomMenu();
    return false;     // cancel default menu
}

As for the mouse events themselves, browsers set a property to the event object that is accessible from the event handling function:

document.body.onclick = function (e) {
    var isRightMB;
    e = e || window.event;

    if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
        isRightMB = e.which == 3; 
    else if ("button" in e)  // IE, Opera 
        isRightMB = e.button == 2; 

    alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
} 

window.oncontextmenu - MDC

How to capture right click on a specify element in javascript?

You can use the contextmenu event:

<div oncontextmenu="javascript:alert('Right Click Performed!');return false;">
    Right click on me!
</div>

And then add a listener:

el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('Right Click Performed!');
    return false;
}, false);

Eventlistener for right click

You need to add a mousedown event rather than a keydown event. This will return an event.button property, the value of which will tell you which button was clicked...

$('element').addEventListener('mousedown', clicked, false);

function clicked(e) {
    switch (e.button) {
        case 0:
          // left mouse button
          break;
        case 1:
          // middle mouse button
          break;
        default:
          // 2 === right mouse button
    }
}

For right- and middle-clicks you may need to preventDefault behaviours.

Hope that helped :)

addEventListener to right click event

Just testing the click type using :
alert("You pressed button: " + event.button)

Right click acts like a left click on the event

The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".

Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.

Finally, try with this code, instead of yours:

document.getElementById("one").addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('hello from right click');
    return false;
}, false);

See https://jsfiddle.net/nnuyguat/3/

Can I handle a right click event on an HTML button / element?

Sure, just add a onmousedown listener, check which mouse was pressed:

JS:

document.getElementById("test").onmousedown = function(event) {
    if (event.which == 3) {
        alert("right clicked!");
    }
}

HTML:

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

Demo: http://jsfiddle.net/Jmmqz/

Mouse right click on Firefox triggers click event

By default, in all browsers right click event is captured by
addEventListener('contextmenu'), otherwise a right click will open a window with some options (each browser has different one).

In Firefox, when you add addEventListener('click') to the document object, it will capture any mouse clicking events (left, right, wheel) on the document and it will disable this right click behavior.

In addition, this is what Mozilla documentation says in Mouse Events section, although the (ANY button) stuff is not activated until you add the listener to the document object

click: A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.

*Note: still the above window is shown when you double click right mouse button, but not with a single click.

---

Related Topics