使用"onclick"事件模拟中键单击元素

Question

问题

对于站点测试，我试图在下面这样的元素上模拟鼠标中键点击(或滚轮点击(，使用基于此处其他答案的JS。

HTML:

<a 
id="example-link" href="https://www.google.com/" 
target="_blank" 
onclick="window.open('https://www.google.com/', '', 
'width=500, height=500, resizable=1, scrollbars=1');
return false;">
<span>Middle Click Me</span>
</a>

JS(希望在这里改变一些东西(：

var middleClick = new MouseEvent( "click", { "button": 1, "which": 2 });
jQuery("#example-link")[0].dispatchEvent( middleClick );

这个问题显示在这个jsfiddle中。

1. 请注意，常规点击通常会弹出一个窗口。jsfiddle正在捕捉弹出窗口并在一个新的选项卡中打开它
2. 使用jsFiddle而不是stackoverflow fiddle以避免混淆，因为堆栈溢出fiddle不能正确处理window.open((

将1(手动中键单击与2(运行代码模拟单击进行比较。

问题是，当我以编程方式触发鼠标中键单击时，它既触发了打开新窗口的onclick方法，也触发了在新选项卡中打开链接(同时创建弹出窗口和选项卡，而不仅仅是选项卡(。如果手动点击该链接，则不会触发弹出窗口。

问题

是否有更好的方法来模拟中间点击(最好是与跨浏览器兼容(按照它的编写方式，我真的无法让MouseEvent脚本准确地模仿手动鼠标中键。

Edit：不幸的是，我不能为了测试完整性而更改HTML对象或修改DOM，所以我更希望onclick标记留在元素上。

Answer 1

据我所知，只要有内联点击处理程序，它就会在该元素上的每个点击事件上触发，但我提出了两个解决方案。

1. 如果您真的不能修改DOM，哪怕只是一瞬间，那么第一个选项就不起作用了。它通过更改DOM然后恢复它来作弊，希望在任何人注意到之前。

2. 第二个选项通过读取链接的属性并使用它们打开新的选项卡，而不触发新的单击事件，从而完全避免了单击链接的需要。(这依赖于脚本对link元素的标记有基本的理解。具体来说，我在这里编写的代码只是假设"link"元素的href属性中有一个有效的url，但如果必要，您可以做出其他更复杂的假设，并根据"link"元素在运行时的属性有条件地执行操作。(。)

注意：第三种选择是创建一个自定义事件，该事件具有与内置click事件相同的核心行为，但实际上不是单击事件，其想法是欺骗onclick处理程序在事件中休眠。我不确定要做多少工作才能足够好地重建这个特殊的轮子。也许不会太糟？

---

在这个脚本中，打开新选项卡的功能是由按钮点击触发的，但这当然只是为了演示，您可能会在页面加载或作为其他操作的回调来触发它们。出于节省空间的原因，代码片段中的锚点元素也略有更改

(因为对window.open的直接调用在Stack Overflow片段中似乎无法正常工作，所以我听从了你的指示，将代码粘贴到小提琴中，这样就可以看到它在名义上的荣耀中运行。(

const
// Identifies some DOM elements
cheatButton = document.getElementById("cheat-button"),
mimicButton = document.getElementById("mimic-button"),
exampleLink = document.getElementById("example-link"),
// Defines an event to be dispatched programmatically
middleClick = new MouseEvent("click", {button: 1, which: 2});
// Demonstrates calling the functions
cheatButton.addEventListener("click", emulateMiddleClick); // Option 1
mimicButton.addEventListener("click", followLink); // Option 2
// Defines the functions
function emulateMiddleClick(){
const onclickHandler = exampleLink.onclick; // Remembers onclick handler
exampleLink.onclick = ""; // Supresses onclick handler
exampleLink.dispatchEvent(middleClick); // Dispatches middle click
exampleLink.onclick = onclickHandler; // Restores onclick handler
}
function followLink(){
if(!exampleLink.href){ return; } // In case href attribute is not set
const {href, target} = exampleLink; // Gets props by using "destructuring"
// This doesn't seem to work in the Stack Overflow snippet...
window.open(href, (target || "_blank")); // In case target attribute is not set
// ...But we can at least log our intention to open a new tab
console.log(`opening: "${href}" (in "${target}")`);
}

div{ margin: 1em; }
button{ padding: 0.3em; border-radius: 0.5em; }
span{ margin: 1.3em; }

<div>
<button id="cheat-button">Fake Click, and Suppress Handler</button>
</div>
<div>
<button id="mimic-button">Follow Link without Clicking</button>
</div>
<a id="example-link"
href="https://www.google.com/"
target="_blank"
onclick="window.open('https://www.google.com/', '', 'width=50, height=50');">
<span>Middle Click Me</span>
</a>