使用纯 Javascript 触发右键单击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7914684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger right click using pure Javascript
提问by Abs
How can I manually triggera rightclick using Javascript?
我怎样才能手动触发一个正确的使用Javascript点击？
I can do this with jQuery but I can only use pure Javascript in this case.
我可以用 jQuery 做到这一点，但在这种情况下我只能使用纯 Javascript。
回答by Rob W
Create an event using the CustomEventconstructor, or (when it is not supported), create an event using document.createEventwith as argument the string "HTMLEvents" (because you're going to create a clickevent). Then, use the initEventmethod to create a clickevent.
使用CustomEvent构造函数创建一个事件，或者（当它不受支持时），使用document.createEvent字符串“HTMLEvents”作为参数创建一个事件（因为您要创建一个click事件）。然后，使用该initEvent方法创建一个click事件。
Finally, use the dispatchEventmethod to fire the event. If you're using IE, the fireEventmethod has to be used instead.
最后，使用dispatchEvent方法来触发事件。如果您使用的是 IE，则fireEvent必须改用该方法。
If you want to trigger the rightclick event, contextmenu, use the code below:
如果要触发右键单击事件contextmenu，请使用以下代码：
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');
}
回答by jmiserez
Another variant, this time using the MouseEventAPI which is a bit more modern. In my case I actually send all three events mouseup/mousedown/contextmenu:
另一个变体，这次使用更现代的MouseEventAPI。就我而言，我实际上发送了所有三个事件 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);
回答by Safwat Fathi
let button = document.querySelector("button");
button.addEventListener("mousedown", event => {
if (event.button === 2) {
console.log("Right button");
}
});
回答by Cu7l4ss
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;
以 Rob W 为例，我还没有尝试过，但是，您需要创建事件对象并在触发事件时将其传递。对于右键单击传递 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 :)
根据 mdn initMouseEvent 更新。祝你好运 ：）
