觸發反應元素的點擊事件

Question

我正在嘗試使用開發人員控制台為反應元素模擬點擊。 為了方便你們測試而不是使用我的代碼，請使用以下反應網站https://www.tradingview.com/chart/?symbol=COINBASE%3ABTCUSD

這發生在 Facebook 等其他網站以及某些項目上。 這只是一個簡單的無登錄站點來測試。

我嘗試單擊的部分是監視列表中的一個項目。 在下圖中，我用箭頭指向它。 當您單擊屏幕右上角“開始免費試用”藍色按鈕下方鬧鍾圖標上方的按鈕時，會出現特定菜單。

要了解我預期會發生什么，請嘗試單擊該行中的任何列，例如 SPX、NDQ、DJI 等……（您應該會看到頁面和股票圖表發生變化）

我目前可以“排序”模擬點擊，但它所做的只是突出顯示該行，而不是像執行實際點擊時那樣實際更改頁面。

要明白我的意思，請按 F12 打開開發人員控制台並鍵入如下命令。

document.getElementsByClassName("wrap-XdW9S1Ib")[2].dispatchEvent(new Event('click',{bubbles:true}));

class 名稱對您來說可能有所不同，因此您可能需要在開發人員控制台的元素菜單中四處尋找以找出適合您的名稱。 搜索單詞wrap- ，您最終應該會找到正確的類集。

在我上傳的圖片中，您會注意到點擊事件觸發了 NDQ 周圍的藍色背景（因為這是包裝類的“第三”元素）。 請注意，它並沒有改變實際的頁面和股票圖表。

我曾嘗試發送其他事件，如“輸入”、“選擇”、“提交”、“dblclick”，但均無濟於事。 我也試過點擊那個包裝器的子元素，每一個都沒有運氣。

我的目標是讓它模擬點擊並實際讓它根據點擊更改頁面。

我目前的方法做錯了什么？

Answer 1

好的，所以我想通了。 事實證明，react 對isTrusted: true的事件非常挑剔，並且它還需要一個屬性nativeEvent : {detail:1}

所以這會很復雜，但要正確模擬點擊，您必須首先確定“onClick”反應元素的位置。

在我的例子中，元素是我的 tradingview 示例中的<div class="wrap-XdW9S1Ib" draggable="true"> 。

由於您可以在控制台中鍵入方便的命令monitorEvents($0,"click") ，它將記錄元素選項卡視圖中最后一個選定項目的所有點擊。

使用它你可以輸入類似： var elem = $0; 輕松設置元素，或者您可以像我在問題中所做的那樣選擇它。

接下來，要理解的關鍵是事件的 isTrusted 屬性用於確定點擊是否為真正的點擊。 這就是 elem.click() 不起作用的原因！

那么我們如何解決這個問題呢？

通過在頂部手動放置一個點擊事件並將該事件記錄到一個名為 event 的全局變量中！

var event;
elem.addEventListener("click",function(e){console.log("click detected");event=e});

這里的關鍵是 event=e 將其存儲到全局變量中。 現在僅僅這樣做是不夠的，就好像你調用 elem.click() 這只會簡單地調用兩個點擊事件，但它仍然不起作用。

但是，REACT 使用合成事件工作，並使用“事件”對象來傳遞其數據。

因此，如果您知道其真正的 onClick 事件在哪里取代了通常的 onclick，您可以使用isTrusted: true事件直接調用它。

鍵入這樣的命令來查找對象的 __reactProps。

for(key in elem){console.log(key)}

這將打印出所有對象。 在我的情況下，onClick 隱藏在elem.__reactProps$3jcigo40r49

現在只需調用：

elem.__reactProps$3jcigo40r49.onClick(event);

它會正確地將其視為實際的鼠標單擊並按您的預期觸發所有更改。 除了......等等，它仍然沒有工作，因為你收到一個錯誤，說無法讀取未定義的屬性（讀取“詳細信息”）。

要解決這個問題，只需在控制台中說。

event.nativeEvent = {detail:1}

現在再次嘗試上一個命令，它將起作用！

---

編輯——下面更容易回答

原來有一個更簡單的解決方案。

就我而言，似乎 isTrusted 無關緊要。 是nativeEvent: {details:1}做到了。

只需像這樣創建一個新的指針事件。

var testEvent = new PointerEvent("click");
testEvent.nativeEvent = {detail:1}
elem.__reactProps$3jcigo40r49.onClick(testEvent);

3行代碼，點擊即可！

Answer 2

當我嘗試這個時，我得到一個錯誤：

未捕獲的類型錯誤：document.querySelector(...).__reactProps$6jhf67fyckh.onClick 不是 function

我在 Chrome 開發控制台中執行此操作。 document.querySelector(path) 正在自動完成顯示的 __reactProps：

document.querySelector("#root > div > div > div.sc-hQRsPl.bqPigl > div > div.sc-papXJ.iIImKA > form > div:nth-child(9) > input").__reactProps$6jhf67fyckh
{value: 'Redeem', disabled: false, type: 'submit', className: 'sc-jZiqTT izoCLX'}
className: "sc-jZiqTT izoCLX"
disabled: false
type: "submit"
value: "Redeem"
[[Prototype]]: Object

此外，由於 __reactPops$6jhf67fyckh 似乎每次都會生成，是否可以通過其他方式獲取它？