JavaScript 如何模拟点击

用JavaScript模拟点击有两种流行的方式，两种方式都在下面的示例中有详细说明。

方法1：使用click()方法

click()方法用于模拟对元素的鼠标点击。它触发被调用元素的点击事件。事件会冒泡到文档树中更高层次的元素，并触发它们的点击事件。首先选择要点击的元素，然后使用click()方法模拟点击该元素。

语法：

element.click()

示例： setInterval()函数被用来调用模拟点击的函数。按钮有一个onclick处理程序，每次常规点击或通过模拟点击时增加计数变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to simulate a click with JavaScript ?</title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to simulate a click
        with JavaScript ?
    </b>
 
    <p>
        The button was clicked
        <span class="total-clicks"></span>
        times
    </p>
 
    <button id="btn1" onclick="addClick()">
        Click Me!
    </button>
 
    <script type="text/javascript">
        let clicks = 0;
 
        function addClick() {
            clicks = clicks + 1;
            document.querySelector('.total-clicks').textContent
                = clicks;
        }
 
        // Simulate click function
        function clickButton() {
            document.querySelector('#btn1').click();
        }
 
        // Simulate a click every second
        setInterval(clickButton, 1000);
    </script>
</body>
</html>

输出：

JavaScript 如何模拟点击

方法2：创建一个新的CustomEvent

CustomEvent构造函数用于在任何元素上创建一个新的事件。CustomEvent接口处理由应用程序初始化的任何用途的事件。可以将“click”事件传递给CustomEvent的构造函数以创建一个点击事件。此创建的事件具有可以访问的各种属性，以自定义事件。首先选择要点击的元素。然后，在该元素上使用dispatchEvent()方法触发点击事件。dispatchEvent()方法在指定的目标上分派一个事件。这模拟了对所选元素的点击。

语法：

click_event = new CustomEvent('click');
btn_element = document.querySelector('#element');
btn_element.dispatchEvent(click_event);

示例： setInterval()函数 用于调用模拟点击的函数。按钮有一个onclick处理程序，每次通过正常点击或模拟点击增加计数变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to simulate a click with JavaScript ?</title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <b>
        How to simulate a click
        with JavaScript ?
    </b>
 
    <p>
        The button was clicked
        <span class="total-clicks"></span>
        times
    </p>
 
    <button id="btn1" onclick="addClick()">
        Click Me!
    </button>
 
    <script type="text/javascript">
        let clicks = 0;
 
        function addClick() {
            clicks = clicks + 1;
            document.querySelector('.total-clicks').textContent
                = clicks;
        }
 
        // Simulate click function
        function clickButton() {
            click_event = new CustomEvent('click');
            btn_element = document.querySelector('#btn1');
            btn_element.dispatchEvent(click_event);
        }
 
        // Simulate a click every second
        setInterval(clickButton, 1000);
    </script>
</body>
</html>

输出：

JavaScript 如何模拟点击