HOWTO · JavaScript
使用 JavaScript 模擬點選
本文演示了我們如何在 JavaScript 中模擬點選。
本頁內容
在 JavaScript 中模擬點選意味著點選事件將在 HTML 元素上自動觸發，而無需使用者手動點選。在建立互動式網頁時，這種模擬點選功能可以在各種情況下派上用場。
為了實現模擬點選功能，我們可以使用 JavaScript 程式語言提供的內建 click() 功能，或者使用 MouseEvent 類建立我們自己的 click 事件。
讓我們看看如何在本文中實現這兩種方式。
在 JavaScript 中使用 click() 模擬點選事件
click() 方法在 JavaScript 中觸發點選事件。此事件在沒有使用者互動的情況下觸發。
click() 可以與支援元素一起使用，例如 input。此方法基於稱為事件冒泡的概念工作。
在事件冒泡中，事件冒泡到文件樹中較高的元素，然後在觸發時觸發它們的單擊事件。
在下面的 HTML 文件中，我們有一個輸入標記、一個核取方塊和一個將 JavaScript 檔案連結到 HTML 文件的指令碼標記。
輸入標籤的 id 為 myCheck 和一個名為 mouseover 的事件，它將函式 myFunction 作為輸入。
<body>
<input type="checkbox" id="myCheck" onmouseover="myFunction()">
<script src="./index.js"></script>
</body>
myFunction 在 JavaScript 檔案中定義。在這個函式中，我們通過 document.getElementById() 函式獲取我們使用它的 id 建立的輸入標籤。
然後我們將 click() 函式新增到該輸入。
function myFunction() {
document.getElementById('myCheck').click();
}
在瀏覽器上執行此程式碼後，這是你將獲得的輸出。
這種方法的缺點是它只適用於某些 HTML 元素。要了解有關 click() 函式的更多資訊，請訪問 MDN 文件。
然而，如果你想模擬點選像錨 <a> 標籤或類似的連結，你必須編寫你的函式來模擬 JavaScript 中的點選。click() 函式將不起作用。
在 JavaScript 中實現一個模擬自定義點選事件的函式
要在 JavaScript 中模擬自定義點選事件，我們必須實現我們的函式。為此，我們將使用 MouseEvent API 來新增 click 事件。
在建立函式之前，讓我們首先建立 HTML 文件。該 HTML 文件將包含一個錨標記和一個指向 JavaScript 檔案的連結。
我們在錨點 <a> 標記上新增了一個 link 的 id，以訪問我們的 JavaScript 檔案中的這個 HTML 元素。我們還將此標籤命名為 Click Me（你可以為此標籤提供任何名稱）。
HTML 文件如下所示。
<body>
<a href="#" id="link">Click Me</a>
<script src="index.js"></script>
</body>
要在 JavaScript 中建立一個新的滑鼠事件，我們必須建立一個 MouseEvent 類的物件。MouseEvent 建構函式採用兩個引數 typeArg 和 mouseEventInit。
event = new MouseEvent(typeArg, mouseEventInit);
typeArg 是它要建立的事件的名稱。在這種情況下，它是一個 click 事件。
mouseEventInit 是一個字典，它本身可以接受各種引數，例如 bubbles、view、clientX、metaKey 等。要了解有關 MouseEvent 建構函式和各種引數的更多資訊，請在 MDN 網站上閱讀其文件。
對於我們的示例，我們只在 mouseEventInit 字典中傳遞了三個鍵值對作為引數。讓我們看看我們傳遞給 mouseEventInit 的三個引數的含義。
-
bubbles：在事件冒泡中，事件將從最裡面的元素開始執行，然後一直到它的祖先（父母）。它需要一個布林值。我們已將其設定為
false，因為我們將在單個元素上註冊此事件；錨標記。該元素也不以巢狀方式存在。 -
cancelable：這告訴瀏覽器我們正在執行的事件是否可以被取消。它也需要一個布林值。 -
view：MouseEvent也接受 view，它是UIEvent的一部分。預設設定為null，但我們也可以將其值設定為window。這將在瀏覽器視窗內執行事件。
var simulateClick = new MouseEvent('click', { bubbles: false, cancelable: true, view: window, }); var url = document.getElementById('link'); url.addEventListener('click', () => console.log('clicked')) url.dispatchEvent(simulateClick)
使用 MouseEvent 類建立的自定義事件將儲存在 simulateClick 變數中。
為了在我們的 JavaScript 檔案中獲取錨標籤，我們將使用 document.getElementById 方法並在 id 中傳遞錨標籤 link。然後我們將該元素儲存在一個名為 url 的變數中。
現在我們已經在 JavaScript 檔案中引用了錨標記，並且我們的自定義點選事件也準備好了，是時候將它新增到錨標記中了。
為了啟動我們建立的模擬點選事件，我們將在 url 變數上使用 dispatchEvent 方法，然後將其中的 simulateClick 作為引數傳遞。
為了確保我們建立的 simulateClick 事件正常工作，我們將使用 addEventListener 在 url 變數上新增另一個 click 事件。然後我們將控制檯記錄一個語句。
這行程式碼是檢查我們建立的事件是否已經被排程。它可以隨時刪除。
應該在執行我們的自定義 simulateClick 事件之前新增此事件。否則，你將不知道 simulateClick 事件是否已成功執行。
上面的程式碼將產生以下輸出：
まとめ
本文演示了兩種在 JavaScript 中模擬點選事件的方法。一種方法是使用名為 click() 的內建函式，另一種方法是建立並執行我們的自定義點選事件 simulateClick。
