如何在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年9月5日

299 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.