JavaScript教程-JavaScript 双击事件

dblclick 事件在元素被双击时触发。当一个元素在非常短的时间内被连续点击两次时，此事件会触发。我们也可以使用 JavaScript 的 addEventListener() 方法来触发双击事件。

在 HTML 中，我们可以使用 ondblclick 属性来创建双击事件。

语法

现在，我们来看一下在 HTML 和 javascript 中创建双击事件的语法（可以选择使用 addEventListener() 方法或不使用该方法）。

在 HTML 中

<element ondblclick = "fun()">

在 JavaScript 中

object.ondblclick = function() { myScript };

在 JavaScript 中使用 addEventListener() 方法

object.addEventListener("dblclick", myScript);

让我们通过一些示例来理解双击事件。

示例 - 在 HTML 中使用 ondblclick 属性

在这个示例中，我们使用 HTML ondblclick 属性创建了双击事件。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="heading" ondblclick="fun()">Hello world :):)</h1>
<h2>双击文本 "Hello world" 查看效果。</h2>
<p>这是使用 **<b>ondblclick</b>** 属性的示例。</p>
<script>
function fun() {
document.getElementById("heading").innerHTML = " 欢迎访问 javaTiku.cn ";
}
</script>
</body>
</html>

解释：

创建一个双击事件，使用 HTML ondblclick 属性。
当双击 "Hello world" 文本时，调用 fun() 函数。
fun() 函数将文本内容更改为 "欢迎访问 javaTpoint.com"。

输出

执行以上代码后，输出如下图所示：

接下来，我们将看看如何使用 JavaScript 创建双击事件。

示例 - 使用 JavaScript

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="heading">Hello world :):)</h1>
<h2>双击文本 "Hello world" 查看效果。</h2>
<p>这是使用 JavaScript 创建双击事件的示例。</p>
<script>
document.getElementById("heading").ondblclick = function() { fun() };
function fun() {
document.getElementById("heading").innerHTML = " 欢迎访问 javaTiku.cn ";
}
</script>
</body>
</html>

解释：

获取 ID 为 "heading" 的元素。
使用 ondblclick 属性将双击事件绑定到元素。
当双击 "Hello world" 文本时，调用 fun() 函数。
fun() 函数将文本内容更改为 "欢迎访问 javaTpoint.com"。

输出

双击文本 "Hello world" 后，输出如下图所示：

示例 - 使用 JavaScript 的 addEventListener() 方法

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="heading">Hello world :):)</h1>
<h2>双击文本 "Hello world" 查看效果。</h2>
<p>这是使用 **<b>addEventListener()</b>** 方法创建双击事件的示例。</p>
<script>
document.getElementById("heading").addEventListener("dblclick", fun);
function fun() {
document.getElementById("heading").innerHTML = " 欢迎访问 javaTiku.cn ";
}
</script>
</body>
</html>

解释：

获取 ID 为 "heading" 的元素。
使用 addEventListener() 方法将双击事件绑定到元素，事件类型为 "dblclick"。
当双击 "Hello world" 文本时，调用 fun() 函数。
fun() 函数将文本内容更改为 "欢迎访问 javaTpoint.com"。

输出