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
How to Perform a Real Time Search and Filter on a HTML Table
How to Let a Table'S Body Scroll But Keep Its Head Fixed in Place
Capture Key Press (Or Keydown) Event on Div Element
"Uncaught Typeerror: Illegal Invocation" in Chrome
Submit Multiple Forms With One Submit Button
JavaScript - Append HTML to Container Element Without Innerhtml
Animate Element to Auto Height With Jquery
How to Make HTML Element Resizable Using Pure JavaScript
How to Escape a Single Quote ( ' ) in JavaScript
Using Queryselector With Ids That Are Numbers
How to Create a New Line in JavaScript
JavaScript Confirm Popup Yes, No Button Instead of Ok and Cancel
How to Add/Update an Attribute to an HTML Element Using JavaScript
How Might I Get the Script Filename from Within That Script
What Are Cookies and Sessions, and How Do They Relate to Each Other
Pass JavaScript Variable to PHP Via Ajax
How to Simulate a Hover With a Touch in Touch Enabled Browsers