Javascript 双击事件

双击事件在双击元素时触发。当一个元素在很短的时间内被点击两次时，该事件会触发。我们也可以使用Javascript的addEventListener()方法来触发双击事件。

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

语法

现在，我们来看看在HTML中和在javascript中创建双击事件的语法（不使用addEventListener()方法或使用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> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of using the <b> ondblclick </b> attribute. </p>
<script>
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";
}
</script>
</body>
</html>

输出

在执行上述代码之后，输出结果将是 –

Javascript 双击事件

在双击文本 “Hello world” 后，输出将是 –

Javascript 双击事件

现在，我们将看到如何使用JavaScript创建双击事件。

示例- 使用JavaScript

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of creating the double click event using JavaScript. </p>
<script>
document.getElementById("heading").ondblclick = function() { fun() };
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";
}
</script>
</body>

</html>

输出

Javascript 双击事件

双击文本 “你好世界” 后，输出结果如下 –

Javascript 双击事件

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

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of creating the double click event using the <b> addEventListener() method </b>. </p>
<script>
document.getElementById("heading").addEventListener("dblclick", fun);
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";
}
</script>
</body>

</html>

输出

Javascript 双击事件