使用 JavaScript 模擬點選

  1. 在 JavaScript 中使用 click() 模擬點選事件
  2. 在 JavaScript 中實現一個模擬自定義點選事件的函式
  3. 結論

在 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 建構函式採用兩個引數 typeArgmouseEventInit

 event = new MouseEvent(typeArg, mouseEventInit);

typeArg 是它要建立的事件的名稱。在這種情況下,它是一個 click 事件。

mouseEventInit 是一個字典,它本身可以接受各種引數,例如 bubblesviewclientXmetaKey 等。要了解有關 MouseEvent 建構函式和各種引數的更多資訊,請在 MDN 網站上閱讀其文件。

對於我們的示例,我們只在 mouseEventInit 字典中傳遞了三個鍵值對作為引數。讓我們看看我們傳遞給 mouseEventInit 的三個引數的含義。

  1. bubbles:在事件冒泡中,事件將從最裡面的元素開始執行,然後一直到它的祖先(父母)。它需要一個布林值。

    我們已將其設定為 false,因為我們將在單個元素上註冊此事件;錨標記。該元素也不以巢狀方式存在。

  2. cancelable:這告訴瀏覽器我們正在執行的事件是否可以被取消。它也需要一個布林值。

  3. viewMouseEvent 也接受 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 的變數中。

現在我們已經在 J​​avaScript 檔案中引用了錨標記,並且我們的自定義點選事件也準備好了,是時候將它新增到錨標記中了。

為了啟動我們建立的模擬點選事件,我們將在 url 變數上使用 dispatchEvent 方法,然後將其中的 simulateClick 作為引數傳遞。

為了確保我們建立的 simulateClick 事件正常工作,我們將使用 addEventListenerurl 變數上新增另一個 click 事件。然後我們將控制檯記錄一個語句。

這行程式碼是檢查我們建立的事件是否已經被排程。它可以隨時刪除。

應該在執行我們的自定義 simulateClick 事件之前新增此事件。否則,你將不知道 simulateClick 事件是否已成功執行。

上面的程式碼將產生以下輸出:

模擬自定義點選事件

結論

本文演示了兩種在 JavaScript 中模擬點選事件的方法。一種方法是使用名為 click() 的內建函式,另一種方法是建立並執行我們的自定義點選事件 simulateClick

相關文章 - JavaScript Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中檢測鍵盤輸入事件
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • 相關文章 - JavaScript Click

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中檢測鍵盤輸入事件
  • 用 JavaScript 在 iframe 中實現一個 onload 事件