如何在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 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告