How to Capture the Right-Click Event in JavaScript

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.

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);

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 get right click event javascript

$("#pasteable").on('paste',function(event){
setTimeout(function(){
alert($("#pasteable").val());
},100);
});

fiddle : http://jsfiddle.net/BgW7x/

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

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>

Capture Right Click on HTML DIV

Take a look at this: Javascript - event properties. Value for right mouse button is 2, although also note that it recommends using mousedown or mouseup events rather than click.

Here is a sample from the page showing right click detection:

function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}

Contextmenu right click event

Use $(e.target) for jquery object representing clicked element. Otherwise just use e.target for plain old javascript dom element.

In your case, to alert the column text, try this code:

$(function() {

var $contextMenu = $("#contextMenu");

$("body").on("contextmenu", "table tr", function(e) {
$contextMenu.css({
display: "block",
left: e.pageX,
top: e.pageY
});
alert($(e.target).text());
return false;
});

$contextMenu.on("click", "a", function() {
$contextMenu.hide();
});

});

More on event.target here: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

addEventListener to right click event

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



Related Topics



Leave a reply



Submit