如何在 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 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告