JavaScript dblclick
JavaScript dblclick
dblclick 事件在双击元素时会生成一个事件。当在非常短的时间内单击两次元素时，将触发该事件。我们还可以使用JavaScript的
addEventListener()方法来触发双击事件。
addEventListener()方法来触发双击事件。
在HTML中我们可以使用
ondblclick 属性创建双击事件。
ondblclick 属性创建双击事件。
语法
现在，我们将看到在HTML和javascript中创建双击事件的语法(不使用addEventListener()方法或使用addEventListener()方法)。
在HTML中
<element ondblclick = "fun()">
在JavaScript中
object.ondblclick = function() { myScript };
在JavaScript中使用addEventListener()方法
object.addEventListener("dblclick", myScript);
让我们看一些插图来了解双击事件。
示例-在HTML中使用ondblclick属性
在此示例中，我们正在创建使用HTML
ondblclick 属性的双击事件。
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 .