JavaScript - 模擬點擊contextmenu

Question

我正在嘗試爲網站創建Web自動化。我正在模擬點擊。通常我會向下面的元素添加ID，並使用Chrome開發者控制檯觸發點擊，並始終有效。

PS：以下問題是outdated.I我其實是想web.whatsapp.com

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

<script> 
    $("#myapp").click(); 
</script> 

或者，如果這是行不通的，我用用mousedown事件單擊右鍵菜單中的項目像下面的純JavaScript，它會順利運行。現在

function triggerMouseEvent(node, eventType) { 
    var clickEvent = document.createEvent('MouseEvents'); 
    clickEvent.initEvent(eventType, true, true); 
    node.dispatchEvent(clickEvent); 
} 

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

我的問題是：這是行不通的，它通過了jQuery插件contextMenu產生的菜單。

你可以看到contextMenu here的演示，我正通過開發者控制檯測試上述內容。

所以，當你右擊上下文菜單上有手動添加ID #myapp菜單之一，可與下面的代碼它也通過開發者控制檯，選擇正確的元素與ul和li tags.I列出的菜單項列表。

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

但我無法觸發點擊通過上下文菜單生成的菜單項。我掙扎了24小時以上。我嘗試了所有我能想到的JavaScript事件，如mouseup，mousedown和mouseenter。

Answer 1

您只能在創建上下文菜單時單擊菜單項，這是由插件動態完成的。所以，我們首先需要觸發菜單。據我所知，觸發本機上下文菜單是不可能的。觸發右擊，但是is possible，您需要使用contextmenu事件。

特別是，使用$(el).trigger('contextmenu')似乎工作正常。這似乎工作，因爲該插件明確supports this。完成後，我們需要點擊我們想要點擊的菜單項。

// 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上，所以在這裏創建一個片段並不容易。然而，我創建了一個JSFiddle來演示這個完全，我複製+粘貼到小提琴的插件源。

---

在評論，你問web.whatsapp.com。我恰好有一個WhatsApp帳戶並在那裏進行測試。它似乎是而不是使用jQuery contextMenu插件。 A $函數確實定義了，但它似乎不是jQuery，而只是document.querySelector的快捷方式。

他們的自定義上下文菜單代碼是我不知道，但我確實設法觸發它。基本上，我使用上述代碼的香草JS版本，然後必須找出觸發哪個元素。後者比我想象的要容易。有一個聊天列表，.infinite-list-item元素。它們在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); 

本採用現代MouseEvent構造函數，代碼是基於this example。

以上將打開瀏覽器左上角的上下文菜單。您可以通過將clientX和clientY屬性傳遞給MouseEvent構造函數來更改位置，該構造函數表示窗口中的位置。

完成後，您可以單擊上下文菜單中的項目。除了你不能使用JavaScript自動化這個。我偷看了源代碼，並且這些菜單項的點擊處理程序檢查是否event.isTrusted，這意味着您無法以編程方式觸發對它們的點擊。

您可能想要考慮使用可模擬較低級別的點擊的東西，如Selenium 2.0（WebDriver），或者像WebdriverIO那樣的一些包裝。