Is right click a Javascript event? If so, how do I use it?
This question is related to
javascript
The answer is
window.oncontextmenu = function (e) {_x000D_
e.preventDefault()_x000D_
alert('Right Click')_x000D_
}<h1>Please Right Click here!</h1>If You want to call the function while right click event means we can use following
<html lang="en" oncontextmenu="func(); return false;">
</html>
<script>
function func(){
alert("Yes");
}
</script>
Try using the which and/or button property
The demo
function onClick(e) {
if (!e)
{
return;
}
switch(`${e.which}${e.button}`)
{
case '10':
console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
break;
case '21':
console.log('Middle mouse button ' + e.clientX + 'x' + e.clientY);
break;
case '32':
console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
break;
case '43':
console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
break;
case '54':
console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
break;
}
}
window.addEventListener("mousedown", onClick);
MacOS
On Windows and Linux there are modifier keys Alt, Shift and Ctrl. On Mac there’s one more: Cmd, corresponding to the property
metaKey...
Even if we’d like to force Mac users to Ctrl+click– that’s kind of difficult. The problem is: aleft-clickwith Ctrl is interpreted as aright-clickon MacOS, and it generates thecontextmenuevent, notclicklike Windows/Linux.
So if we want users of all operating systems to feel comfortable, then together withctrlKeywe should checkmetaKey.
For JS-code it means that we should checkif (event.ctrlKey || event.metaKey)...
Related: here
Handle event using jQuery library
$(window).on("contextmenu", function(e)
{
alert("Right click");
})
Yes, oncontextmenu is probably the best alternative but be aware that it triggers on mouse down whereas click will trigger on mouse up.
Other related questions were asking about double right click - which apparently isn't supported except through manual timer checking. One reason you might want to be able to have right double click is if you need/want to support left-handed mouse input (button reversal). The browser implementations seem to make a lot of assumptions about how we should be using the available input devices.
Most of the given solutions using the mouseup or contextmenu events fire every time the right mouse button goes up, but they don't check wether it was down before.
If you are looking for a true right click event, which only fires when the mouse button has been pressed and released within the same element, then you should use the auxclick event. Since this fires for every none-primary mouse button you should also filter other events by checking the button property.
window.addEventListener("auxclick", (event) => {
if (event.button === 2) alert("Right click");
});You can also create your own right click event by adding the following code to the start of your JavaScript:
{
const rightClickEvent = new CustomEvent('rightclick', { bubbles: true });
window.addEventListener("auxclick", (event) => {
if (event.button === 2) {
event.target.dispatchEvent(rightClickEvent);
}
});
}
You can then listen for right click events via the addEventListener method like so:
your_element.addEventListener("rightclick", your_function);
Read more about the auxclick event on MDN.
have a look at the following jQuery code:
$("#myId").mousedown(function(ev){
if(ev.which == 3)
{
alert("Right mouse button clicked on element with id myId");
}
});
The value of which will be:
- 1 for the left button
- 2 for the middle button
- 3 for the right button
Yes - it is!
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
}
Easiest way to get right click done is using
$('classx').on('contextmenu', function (event) {
});
However this is not cross browser solution, browsers behave differently for this event especially firefox and IE. I would recommend below for a cross browser solution
$('classx').on('mousedown', function (event) {
var keycode = ( event.keyCode ? event.keyCode : event.which );
if (keycode === 3) {
//your right click code goes here
}
});
That is the easiest way to fire it, and it works on all browsers except application webviews like ( CefSharp Chromium etc ... ). I hope my code will help you and good luck!
const contentToRightClick=document.querySelector("div#contentToRightClick");_x000D_
_x000D_
//const contentToRightClick=window; //If you want to add it into the whole document_x000D_
_x000D_
contentToRightClick.oncontextmenu=function(e){_x000D_
e=(e||window.event);_x000D_
e.preventDefault();_x000D_
console.log(e);_x000D_
_x000D_
return false; //Remove it if you want to keep the default contextmenu _x000D_
}div#contentToRightClick{_x000D_
background-color: #eee;_x000D_
border: 1px solid rgba(0,0,0,.2);_x000D_
overflow: hidden;_x000D_
padding: 20px;_x000D_
height: 150px;_x000D_
}<div id="contentToRightClick">Right click on the box !</div>No, but you can detect what mouse button was used in the "onmousedown" event... and from there determine if it was a "right-click".
Ya, though w3c says the right click can be detected by the click event, onClick is not triggered through right click in usual browsers.
In fact, right click only trigger onMouseDown onMouseUp and onContextMenu.
Thus, you can regard "onContextMenu" as the right click event. It's an HTML5.0 standard.
Yes, its a javascript mousedown event. There is a jQuery plugin too to do it
You could use the event window.oncontextmenu, for example:
window.oncontextmenu = function () {_x000D_
alert('Right Click')_x000D_
}<h1>Please Right Click here!</h1>This is worked with me
if (evt.xa.which == 3)
{
alert("Right mouse clicked");
}
The following code is using jQuery to generate a custom rightclick event based on the default mousedown and mouseup events.
It considers the following points:
- trigger on mouseup
- trigger only when pressed mousedown on the same element before
- this code especially also works in JFX Webview (since the
contextmenuevent is not triggered there) - it does NOT trigger when the contextmenu key on the keyboard is pressed (like the solution with the
on('contextmenu', ...)does
$(function ()_x000D_
{ // global rightclick handler - trigger custom event "rightclick"_x000D_
var mouseDownElements = [];_x000D_
$(document).on('mousedown', '*', function(event)_x000D_
{_x000D_
if (event.which == 3)_x000D_
{_x000D_
mouseDownElements.push(this);_x000D_
}_x000D_
});_x000D_
$(document).on('mouseup', '*', function(event)_x000D_
{_x000D_
if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)_x000D_
{_x000D_
$(this).trigger('rightclick');_x000D_
}_x000D_
});_x000D_
$(document).on('mouseup', function()_x000D_
{_x000D_
mouseDownElements.length = 0;_x000D_
});_x000D_
// disable contextmenu_x000D_
$(document).on('contextmenu', function(event)_x000D_
{_x000D_
event.preventDefault();_x000D_
});_x000D_
});_x000D_
_x000D_
_x000D_
_x000D_
// Usage:_x000D_
$('#testButton').on('rightclick', function(event)_x000D_
{_x000D_
alert('this was a rightclick');_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<button id="testButton">Rightclick me</button>If you want to detect right mouse click, you shouldn't use MouseEvent.which property as it is non-standard and there's large incompatibility among browsers. (see MDN) You should instead use MouseEvent.button. It returns a number representing a given button:
0: Main button pressed, usually the left button or the un-initialized state1: Auxiliary button pressed, usually the wheel button or the middle button (if present)2: Secondary button pressed, usually the right button3: Fourth button, typically the Browser Back button4: Fifth button, typically the Browser Forward button
MouseEvent.button handles more input types than just standard mouse:
Buttons may be configured differently to the standard "left to right" layout. A mouse configured for left-handed use may have the button actions reversed. Some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxilary, etc. Others may have many buttons mapped to different functions and button values.
Reference:
To handle right click from the mouse, you can use the 'oncontextmenu' event. Below is an example:
document.body.oncontextmenu=function(event) {
alert(" Right click! ");
};
the above code alerts some text when right click is pressed. If you do not want the default menu of the browser to appear, you can add return false; At the end of the content of the function. Thanks.
Source: Stackoverflow.com