javascript 监听双击

📌 相关文章

📜 javascript 监听双击 - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:45.245000 🧑 作者: Mango

在Javascript中，我们可以通过addEventListener()方法来给指定元素添加双击事件监听器。

语法

element.addEventListener("dblclick", function);

参数

dblclick：双击事件的类型，不区分大小写。
function：当双击事件发生时要执行的函数，也可以是一个函数的名称。

示例代码

以下是一个使用addEventListener()方法来监听双击事件的示例代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript 监听双击</title>
  </head>
  <body>
    <h1>双击这个段落来改变它的颜色</h1>
    <p id="myParagraph">这是一个要改变颜色的段落</p>
    <script>
      const paragraph = document.getElementById("myParagraph");
      paragraph.addEventListener("dblclick", function () {
        if (this.style.color === "red") {
          this.style.color = "blue";
        } else {
          this.style.color = "red";
        }
      });
    </script>
  </body>
</html>

运行上述代码，双击段落会交替改变它的颜色。

注意事项

双击事件不是所有的设备都支持，例如移动设备很少支持双击事件，应该尽量避免在移动端使用双击事件。
在使用双击事件时，要确保不会与其他事件发生冲突，例如单击事件或拖拽事件等。