JavaScript dblclick

JavaScript dblclick

dblclick 事件在双击元素时会生成一个事件。当在非常短​​的时间内单击两次元素时,将触发该事件。我们还可以使用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> 双击 "Hello world" 查看效果. </h2>
<p> This is an example of using the <b> ondblclick </b> attribute. </p>
<script>
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the bianchenghao6.com ";
}
</script>
</body>
</html>
输出

Hello world :):)

双击 "Hello world" 查看效果.

This is an example of using the ondblclick attribute.

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

示例-使用JavaScript

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> 双击 "Hello world" 查看效果. </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 bianchenghao6.com ";
}
</script>
</body>
</html>
输出

Hello world :):)

双击 "Hello world" 查看效果.

This is an example of creating the double click event using JavaScript.

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

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> 双击 "Hello world" 查看效果. </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 bianchenghao6.com ";
}
</script>
</body>
</html>
输出

Hello world :):)

双击 "Hello world" 查看效果.

This is an example of creating the double click event using the addEventListener() method .