使用纯Javascript触发右键单击

Question

我怎样才能手动触发一个正确的使用Javascript点击？

我可以用jQuery做到这一点,但在这种情况下我只能使用纯Javascript.

Answer 1

使用CustomEvent构造函数创建一个事件,或者(当它不受支持时),使用document.createEventwith as参数创建一个事件字符串"HTMLEvents"(因为你要创建一个click事件).然后,使用该initEvent方法创建一个click事件.

最后,使用该dispatchEvent方法来触发事件.如果您使用的是IE,则fireEvent必须使用该方法.

如果要触发右键单击事件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');
}

Answer 2

另一个变体，这次使用更现代的MouseEvent API。就我而言，我实际上发送了所有三个事件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);