Question

如何使用Javascript手动触发正确点击？

我可以使用jQuery执行此操作，但在这种情况下我只能使用纯Javascript。

Answer 1

使用CustomEvent构造函数创建事件，或者（当不支持时）使用document.createEvent创建一个事件，并使用字符串“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);

Answer 3

以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);
}

根据mdn initMouseEvent更新。祝你好运：）

Answer 4

  let button = document.querySelector("button");
  button.addEventListener("mousedown", event => {
    if (event.button === 2) {
      console.log("Right button");
    }
  });

Please check this MDN page about it

使用纯Javascript触发右键单击

4 个答案: