在 HTML 中双击元素时执行脚本?

htmlweb developmentfront end technology更新于 2025/4/10 2:52:17

双击指针设备按钮(例如鼠标主按钮)，或在短时间内在同一元素上快速单击两次，都会触发 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>