JavaScript-模拟点击上下文菜单

JavaScript-模拟点击上下文菜单,javascript,jquery,dom,contextmenu,Javascript,Jquery,Dom,Contextmenu,我正在尝试为网站创建web自动化。我在模拟点击。通常我会在下面这样的元素中添加一个ID,然后使用Chrome开发者控制台触发一次点击,它总是可以工作的 p、 s:下面的问题已经过时了。我实际上是想在web.whatsapp.com的上下文菜单中点击一个项目 <div id="myapp">button1</div> <script> $("#myapp").click(); </script> 现在我的问题是:这不适用于通过jQuery插件

我正在尝试为网站创建web自动化。我在模拟点击。通常我会在下面这样的元素中添加一个ID,然后使用Chrome开发者控制台触发一次点击,它总是可以工作的

p、 s:下面的问题已经过时了。我实际上是想在web.whatsapp.com的上下文菜单中点击一个项目

<div id="myapp">button1</div>

<script>
  $("#myapp").click();
</script>
现在我的问题是:这不适用于通过jQuery插件生成的菜单

您可以看到contextMenu的演示,我正在通过开发者控制台测试上面的内容

var targetNode = document.querySelector("#myapp");
targetNode;
因此,当您右键单击上下文菜单时,会出现一个带有
ul
li
标记的菜单项列表。我手动将ID
#myapp
添加到其中一个菜单中,使用下面的代码,它还可以通过开发者控制台选择正确的元素

var targetNode = document.querySelector("#myapp");
targetNode;

但我无法触发通过上下文菜单生成的菜单项上的单击。我挣扎了24个多小时。我尝试了JavaScript中我能想到的所有事件,比如
mouseup
mousedown
,以及
mouseenter
,,只有在创建上下文菜单时才能单击菜单项,这是由插件动态完成的。因此,我们首先需要触发菜单

据我所知,触发本机上下文菜单是不可能的。但是,触发右键单击时,需要使用
contextmenu
事件

特别是,使用
$(el).trigger('contextmenu')
似乎可以正常工作。这似乎是可行的,因为插件是显式的。完成后,我们需要触发对要单击的菜单项的单击

// first, trigger the context menu
$('.button-that-has-contextmenu').trigger('contextmenu');
// then click the menu item you want to click
// substitute the correct index in `eq(X)` here
$('.context-menu-item:eq(1)').trigger('mouseup');
因为这个插件不是托管在CDN上的,所以在这里创建代码片段并不容易。然而,我已经创建了一个完整的演示,在那里我复制并粘贴了插件源代码到fiddle中


在评论中,您询问了。我碰巧有一个WhatsApp帐户,并在那里进行了测试。似乎他们没有使用jQuery上下文菜单插件。确实定义了一个
$
函数,但它似乎不是jQuery,而只是一个快捷方式

我不知道他们自定义的上下文菜单代码是什么,但我成功地触发了它。基本上,我使用了上述代码的vanilla JS版本,然后必须确定触发哪个元素。后者比我想象的要容易。有一个打开的聊天列表,
。无限列表项
元素。它们在DOM中的顺序与视觉顺序不匹配,但可以使用浏览器检查器(例如)查找所需的顺序。如果您拥有该列表项,则需要该列表项中的
.chat
元素。假设我们对第二项感兴趣,我们可以按如下方式选择:

var target = $('.infinite-list-item:nth-child(2) .chat');
您可以在浏览器控制台中检查是否获得了正确的元素。然后,激发一个事件,如下所示

var evt = new MouseEvent('contextmenu', {
      bubbles: true,
      cancelable: true,
      view: window,
      buttons: 2
    });
target.dispatchEvent(evt);
这使用了现代构造函数,代码是基于

以上内容将打开浏览器左上角的关联菜单。您可以通过将
clientX
clientY
属性传递到表示窗口中位置的
MouseEvent
构造函数来更改位置

完成后,可以单击关联菜单中的项目。除非您无法使用JavaScript自动执行此操作。我瞥了一眼这些菜单项的源代码,然后单击处理程序检查是否,这意味着您无法通过编程触发对它们的单击


您可能希望使用一些可以在较低级别上模拟单击的工具,例如(WebDriver),或者类似的包装器。

嘿,谢谢您提供的解决方案,但它在我实际测试的地方不起作用。。。实际上是web.whatsapp.com。。如果右键单击其中列出此上下文菜单的任何位置。。。它在那里不起作用。。我把它的html代码放在这里。。它在那里工作。但是不在web.whatsapp.com上工作。也许它的母公司是绝对定位的。请帮帮我,我会给你多少赏金我,谢谢你,非常感谢你,我实际上能够使用鼠标悬停事件触发上下文菜单,并单击。图标向下,但无法单击静音按钮。现在我知道原因了。因为我受信任。。我计划使用硒。。selenium是否可以单击这些按钮,即使有isTrusted?您能告诉任何优秀的selenium javascript包装器在哪里可以执行此操作和任何操作吗?非常欢迎!是的,它将与Selenium一起工作,因为它在较低的级别上模拟单击和鼠标移动。我个人没有任何JS包装的经验,但你可以尝试一下WebdriverIO,我在我的答案中链接了它。在你授予奖金之前,让我知道我的答案中是否有什么可以改进的地方。我给了你奖金:),我按照你说的尝试了WebDriverJ。。现在遇到了一些问题,如果你能解决它,我会给你200赏金:D--