Trigger right click using pure Javascript
Create an event using the CustomEvent
constructor, or (when it is not supported), create an event using document.createEvent
with as argument the string "HTMLEvents" (because you're going to create a click
event). Then, use the initEvent
method to create a click
event.
Finally, use the dispatchEvent
method to fire the event. If you're using IE, the fireEvent
method has to be used instead.
If you want to trigger the rightclick event, contextmenu
, use the code below:
var element = document.getElementById('yourElement');
if (window.CustomEvent) {
element.dispatchEvent(new CustomEvent('contextmenu'));
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('contextmenu', true, false);
element.dispatchEvent(ev);
} else { // Internet Explorer
element.fireEvent('oncontextmenu');
}
how to simulate right click in javascript
with jQuery
$('#recover').trigger({
type: 'mousedown',
which: 3
});
otherwise
var element = document.getElementById('recover');
var e = element.ownerDocument.createEvent('MouseEvents');
e.initMouseEvent('contextmenu', true, true,
element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
false, false, false,2, null);
return !element.dispatchEvent(e);
JavaScript - simulate click on contextmenu
You can only click the menu items when the context menu is created, which is done dynamically by the plugin. So, we first need to trigger the menu.
Triggering a native context menu is not possible, as far as I know. Triggering a right click however is possible, you need to use the contextmenu
event.
In particular, using $(el).trigger('contextmenu')
seems to work fine. This seems to be working because the plugin explicitly supports this. When that is done, we need to trigger a click on the menu item we want to click on.
// first, trigger the context menu
$('.button-that-has-contextmenu').trigger('contextmenu');
// then click the menu item you want to click
// substitute the correct index in `eq(X)` here
$('.context-menu-item:eq(1)').trigger('mouseup');
Because this plugin is not hosted on a CDN, it is not easy to create a snippet here. I have however created a JSFiddle to demo this fully, where I copy + pasted the plugin source into the fiddle.
In the comments, you asked about web.whatsapp.com. I happen to have a WhatsApp account and tested it there. It seems that they are not using the jQuery contextMenu plugin. A $
function is indeed defined, but it appears not to be jQuery, but just a shortcut to document.querySelector
.
What their custom context menu code is I don't know, but I did manage to trigger it. Basically, I used the vanilla JS version of the above code and then had to figure out which element to trigger. The latter was easier than I thought. There is a list of chats that is open, .infinite-list-item
elements. Their order in the DOM does not match the visual order, but finding the one you want can be done using the browser inspector for example. Given that you have that, you want the .chat
element inside of that list item. Say we are interested in the second item, we can select it as follows:
var target = $('.infinite-list-item:nth-child(2) .chat');
You can check in the browser console that you got the right element. Then, fire an event as follows.
var evt = new MouseEvent('contextmenu', {
bubbles: true,
cancelable: true,
view: window,
buttons: 2
});
target.dispatchEvent(evt);
This uses the modern MouseEvent
constructor, code is based on this example.
The above will open the context menu in the upper left corner of your browser. You can change the position by passing a clientX
and clientY
property into the MouseEvent
constructor, that represent a position in the window.
When that is done, you can click the items in the context menu. Except you cannot automate this using JavaScript. I peeked at the source and the click handler of those menu items checks if event.isTrusted
, meaning that you cannot programmatically trigger a click on them.
You may want to look into using something that can emulate clicks on a lower level, like Selenium 2.0 (WebDriver), or some wrapper around it like WebdriverIO.
Javascript Dom Right Click Function
Yap easy:
var element = document.getElementById('Id_here');
if (window.CustomEvent) {
element.dispatchEvent(new CustomEvent('contextmenu'));
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('contextmenu', true, false);
element.dispatchEvent(ev);
} else { // Internet Explorer
element.fireEvent('oncontextmenu');
}
How can I make a left-click behave as a right-click?
- Add a click-event listener to the document
- save what element was the lowest in the dom-tree that got clicked
- fire an event 'rightclick' (or whatever its called) to that element with the same x and y coords as you have received from the click event.
The event listener:
document.addEventListener('click', function(e) {
console.log(e);
});
This gives you already a lot of information. You'll get the x/y coords of your mouseclick and more important, you get the element that received the click: e.originalTarget (note that events differ from browser to browser).
save the element:
document.addEventListener('click', function(e) {
var originalElement = e.srcElement || e.originalTarget;
});
and fire a right-click on that element:
document.addEventListener('click', function(e) {
var originalElement = e.srcElement || e.originalTarget;
if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('contextmenu', true, false);
originalElement .dispatchEvent(ev);
} else { // Internet Explorer
originalElement .fireEvent('oncontextmenu');
}
});
edit:
it does not seem to work yet, so consider using this method for firing the right-click in pure js: How to generate a right-click event in all browsers
How to add a custom right-click menu to a webpage?
Answering your question - use contextmenu
event, like below:
if (document.addEventListener) { document.addEventListener('contextmenu', function(e) { alert("You've tried to open context menu"); //here you draw your own menu e.preventDefault(); }, false);} else { document.attachEvent('oncontextmenu', function() { alert("You've tried to open context menu"); window.event.returnValue = false; });}
<body> Lorem ipsum...</body>
Related Topics
Why Do We Need to Install Gulp Globally and Locally
Fulfill (Don't Resolve) Promise with Another Promise
Prevent Jquery UI Dialog from Setting Focus to First Textbox
Canvas Todataurl() Returns Blank Image
Element Not Visible Error (Not Able to Click an Element)
How to Return a JavaScript String from a Webassembly Function
Why Is Immutability So Important (Or Needed) in JavaScript
How to Access 'Window' (Target Page) Objects When @Grant Values Are Set
Differencebetween & VS @ and = in Angularjs
Google Maps JavaScript API Referernotallowedmaperror
How to Print a Stack Trace in Node.Js
Es6 Promise.All() Error Handle - Is .Settle() Needed
Differencebetween Typeof and Instanceof and When Should One Be Used VS. the Other
Retrieving Binary File Content Using JavaScript, Base64 Encode It and Reverse-Decode It Using Python
Firebase Query Methods Startat() Taking Case Sensitive Parameters
What Does the Function Then() Mean in JavaScript
Getting the User Id from a Database Trigger in Cloud Functions for Firebase