How can I manually trigger a right click using Javascript?
I can do this with jQuery but I can only use pure Javascript in this case.
3
-
how do you mean capture right click or only on specific element?david– david2011-10-27 10:39:16 +00:00Commented Oct 27, 2011 at 10:39
-
3I don't want to capture an event, I want to trigger a right click event on a given element.Abs– Abs2011-10-27 10:46:52 +00:00Commented Oct 27, 2011 at 10:46
-
2Then how do you do it with jQuery?Anders Lindén– Anders Lindén2016-04-13 08:47:36 +00:00Commented Apr 13, 2016 at 8:47
Add a comment
|
3 Answers
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');
}
7 Comments
Rob W
@Abs, somehow I interpreted "right click" as "correctly implement click". Updating answer in a second, the concept is the same. EDIT Do you mean
contextmenu event, or a real right click?
Abs
thanks for the link - but it doesn't seem to work for me? I tried it on several browsers. Here is an example: jsfiddle.net/9gbd4
Rob W
@Abs You should invoke the
dispatchEvent method on the element which should get a rightclick event. Instead of click, you should use mousedown, because the click event normally don't capture rightclick events. Fiddle: jsfiddle.net/9gbd4/1. Note: If you're intending to show a context menu using JavaScript, give up. JavaScript cannot trigger such behaviour.
Patrick
@RobW I believe that you can, in fact, trigger a native browser context menu by firing this event. I've done and tested just this, actually. The tricky bit, as far as I can tell, is that you can only do it during another mouse event. Specifically, I've been able to stop a right click event from occurring on one element and in the same handler fire the context menu on a different element. Hope that helps.
Rob W
@Patrick I'd be glad to see a demo. The following demo, based on the previous demo and your hints does not show a context menu (Chrome 21): jsfiddle.net/9gbd4/2
|
Another variant, this time using the MouseEvent API which is a bit more modern. In my case I actually send all three events mouseup/mousedown/contextmenu:
var element = document.getElementById("yourElement");
var ev1 = new MouseEvent("mousedown", {
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 2,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
});
element.dispatchEvent(ev1);
var ev2 = new MouseEvent("mouseup", {
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 0,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
});
element.dispatchEvent(ev2);
var ev3 = new MouseEvent("contextmenu", {
bubbles: true,
cancelable: false,
view: window,
button: 2,
buttons: 0,
clientX: element.getBoundingClientRect().x,
clientY: element.getBoundingClientRect().y
});
element.dispatchEvent(ev3);
2 Comments
M-A-X
Not works in 2024
jmiserez
Works fine for me, just tested. And the MouseEvent API is supported among all browsers. Your website needs to do something with the right-click though. If you're looking to open the native browser context menu that's not possible with any of the solutions here.
Taking Rob W example, I haven't tried it but, You need to make the event object and pass it along when firing the event. for the right click pass event.button = 2;
var element = document.getElementById("yourElement"),
ev;
if(document.createEvent ) {
ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window,0,0,0,0,0,false,false,false,false,2,null);
element.dispatchEvent(ev);
} else {
ev = document.createEventObject();
ev.button = 2;
element.fireEvent('onclick', ev);
}
Updated according to mdn initMouseEvent. Good luck :)
7 Comments
Rob W
ev.which cannot be changed, as it's a read-only property (at least in Firefox 3.6.23).
Cu7l4ss
You were right, it's button but I'm not sure it's making it. since I have no idea what @Abs is after
Cu7l4ss
@Abs it's working both in IE and every other browser I checked. the captured event object would be set with button = 2
Cu7l4ss
@Rob W For some odd reason then this code works. and the ev.button in the mozilla case is a left over. But I checked, this code works, double checked it.
Abs
I tried this in Firefox 3.2 and I get the error
setting a property that has only a getter in my firebug. |