如何在 HTML 中雙擊元素時執行指令碼？

當指向裝置按鈕（例如滑鼠的主按鈕）被雙擊，或者在短時間內快速在同一元素上點選兩次時，將觸發 dblclick 事件。

以下是示例…

示例：在 HTML 中使用 ondblclick 屬性

在以下示例中，我們使用 ondblclick 屬性來使用 HTML 建立雙擊事件。

<!DOCTYPE html>
<html>
<body>
   <h1 id = "tutorials" ondblclick = "varma()"> HELLO EVERYONE :):) </h1>
   <h2> Double Click the text "HELLO EVERYONE" to see the effect. </h2>
   <script>
      function varma() {
         document.getElementById("tutorials").innerHTML = "WELCOME TO THE TUTORIALSPOINT.. ";
      }
   </script>
</body>
</html>

輸出

執行上述指令碼將生成以下輸出：

在開始時，當您嘗試執行程式碼時，它將開啟一個包含文字“HELLO EVERYONE :):)”的視窗。

雙擊文字“HELLO EVERYONE”將觸發我們的 dblclick 事件並顯示文字“WELCOME TO THE TUTORIALSPOINT。”

示例：使用 JavaScript

在以下示例中，我們使用 javascript 建立雙擊事件。

<!DOCTYPE html>
<html>
<body>
   <h1 id = "tutorial"> HELLO </h1>
   <h2> Double Click To See Effect</h2>
   <script>
      document.getElementById("tutorial").ondblclick = function() { varma()};
      function varma() {
         document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT ";
      }
   </script>
</body>
</html>

輸出

當我們嘗試執行指令碼時，輸出視窗彈出，顯示文字“hello”，並帶有提示（雙擊檢視效果）。

雙擊文字“hello”，dblclick 將被啟用並顯示文字“welcome to tutorialspoint”。

示例：使用 addEventListener() 方法

在以下示例中，我們使用 addeventlistener() 方法建立雙擊事件。

<!DOCTYPE html>
<html>
<body>
   <h1 id = "tutorial"> Hello</h1>
   <h2> Double Click to see effect</h2>
   <script>
      document.getElementById("tutorial").addEventListener("dblclick", varma);
      function varma() {
         document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT ";
      }
   </script>
</body>
</html>

輸出

執行上述指令碼後，它將顯示文字“hello”，並附帶提示（雙擊檢視效果）。

雙擊文字“hello”，事件將生效並顯示文字“welcome to tutorialspoint”。

更新於： 2022-09-05

299 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.