HTML - DOM 元素 click() 方法

HTML DOM 元素 **click()** 方法以程式設計方式啟用元素上的滑鼠點選，使其表現得像使用者點選一樣。

語法

element.click();

返回值

此方法不返回任何值。

HTML DOM 元素“click()”方法示例

以下是一些顯示 click() 方法的不同用例的示例。

模擬按鈕點選

此示例幫助我們使用 click() 方法模擬按鈕點選。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Click Method Example</title>
    <script>
        function simulateButtonClick() { 
            var button = document.getElementById("bt");
        
            button.click();
            // Display a message to confirm the click
            alert("Button clicked programmatically!");
        }
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>click() Method</h2>
    <p>Click the button "Simulate" to trigger
        it programmatically..
        </p>
    <button id="bt" onclick="alert('Button clicked!')">
        Click me
    </button>    
    <!-- Trigger the button click programmatically -->
    <button onclick="simulateButtonClick()">
        Simulate Button Click
    </button>
</body>

</html>

模擬連結點選

此示例向我們展示瞭如何使用 click() 方法模擬連結點選。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Click Method Example</title>
</head>

<body>
    <h2>HTML - DOM Element</h2>
    <h3>click() Method</h3>
    <p>
        Click the button to simulate clicking on the link:
    </p>
    <a href="https://tutorialspoint.tw/index.htm" 
    id="myLink">Click Me</a>
    <button id="clickButton">
        Simulate Click
    </button>
    
    <script>
    document.addEventListener('DOMContentLoaded',
    function(){
        var link = document.getElementById('myLink');
        var clickButton = document.getElementById
        ('clickButton');    
    
        // Simulate link click when button is clicked
        clickButton.addEventListener('click', function(){
            link.click();
        });
    });
    </script>
</body>

</html>

模擬複選框點選

此示例演示瞭如何使用 click() 方法以程式設計方式模擬複選框點選。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Click Method Example with Checkbox</title>
    <script> 
        function toggleCheckbox() { 
            var checkbox = document.getElementById("my");
            // Simulate a click on the checkbox
            checkbox.click(); 
                
        }
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>click() Method Example with Checkbox</h2>
    <p>
        Click the checkbox or "Toggle Checkbox" 
        button to see an alert message.
    </p>
    <!-- Checkbox element -->
    <input type="checkbox" id="my" onclick="checkbox">
        Checkbox
    <br><br>
    
    <button onclick="toggleCheckbox()">
        Toggle Checkbox
    </button>
</body>

</html>

支援的瀏覽器

方法
click()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面