使用纯Javascript触发右键点击

Question

我如何使用Javascript手动触发右键点击？

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

- Abs

---

你的意思是如何捕获右键单击事件，或者只在特定元素上捕获？ - david

我不想捕获事件，我想在给定元素上触发右键单击事件。 - Abs

那么你如何使用jQuery完成它？ - Anders Lindén

Answer 1

使用 CustomEvent 构造函数创建一个事件，或者（当不支持时）使用 document.createEvent 并将字符串 "HTMLEvents" 作为参数创建一个事件 (因为你将要创建一个 click 事件)。然后，使用 initEvent 方法创建一个 click 事件。

最后，使用 dispatchEvent 方法来触发该事件。如果你使用的是IE，则必须使用 fireEvent 方法。

如果你想触发 right-click 事件，即 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');
}

- Rob W

---

@Abs，我不知怎么把“右键单击”解释为“正确实现单击”。我会在一秒钟内更新答案，概念是相同的。编辑你是指contextmenu事件还是真正的右键单击？ - Rob W

谢谢提供链接，但是对我好像不起作用？我在几个浏览器上都试过了。这里有一个例子：http://jsfiddle.net/9gbd4/ - Abs

您应该在需要接收右键点击事件的元素上调用dispatchEvent方法。您应该使用mousedown而不是click，因为click事件通常无法捕获右键点击事件。 **示例：http://jsfiddle.net/9gbd4/1/**。注意：如果您想使用JavaScript显示上下文菜单，请放弃，因为JavaScript无法触发此类行为。 - Rob W

@Patrick，我很乐意看到演示。以下演示基于之前的演示和您的提示，但未显示上下文菜单（Chrome 21）：http://jsfiddle.net/9gbd4/2/ - Rob W

请注意，initEvent现已弃用。 - automaton

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

- jmiserez

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更新。 祝你好运 :)

- Cu7l4ss

---

ev.which 无法更改，因为它是一个只读属性（至少在 Firefox 3.6.23 中是这样）。 - Rob W

@Abs，它可以在IE和其他我检查过的浏览器中正常工作。捕获的事件对象将设置为button = 2。 - Cu7l4ss

@Rob W，出于某种奇怪的原因，这段代码可以工作。在Mozilla的情况下，ev.button是多余的。但是我检查过了，这段代码可以工作，进行了双重检查。 - Cu7l4ss

我在Firefox 3.2上尝试了这个操作，结果在我的Firebug中出现了错误“设置了一个只读属性”。 - Abs

@Abs 是的，我忘了在 w3c 方式中删除 ev.button = 2... 尝试删除那一行。 - Cu7l4ss