The HTML oncuechange attribute is an event handler that triggers the execution of a script when an element is double-clicked by the user's mouse.
Definition and Usage
➔ It is triggered when a user performs a double-click action on an HTML element.
➔ This can be applied to almost all visible HTML elements.
➔ onclick works with a single mouse click, ondblclick works with a quick double mouse click.
Syntax
//In HTML
<p ondblclick="myFunction()" id="pid">
//Using Event Handler
x.ondblclick = function () { myFunction() };
//Using addEventListener
x.addEventListener("dblclick", () => { myFunction(); });
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| ondblclick | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ondblclick Attribute Example</title>
</head>
<body>
<h2>HTML ondblclick Attribute Example</h2>
<p ondblclick ="myFunction()" id="pid">Try double click on this text.to trigger event.</p>
<script>
function myFunction() {
alert("You double click on the text.");
}
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ondblclick Attribute Example</title>
</head>
<body>
<h2>HTML ondblclick Attribute Example</h2>
<p id="pid">Try double click on this text.to trigger event..</p>
<script>
let x = document.querySelector("#pid");
function myFunction() {
alert("You double click on the text.");
}
//Using Event Handler
x.ondblclick = function () { myFunction() };
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ondblclick Attribute Example</title>
</head>
<body>
<h2>HTML ondblclick Attribute Example</h2>
<p id="pid">Try double click on this text.to trigger event..</p>
<script>
let x = document.querySelector("#pid");
function myFunction() {
alert("You double click on the text.");
}
//Using addEventListener
x.addEventListener("dblclick",()=>{myFunction();})
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.