The HTML ondblclick 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(); });
Usage and Best Practices
➔ The ondblclick event occurs in two rapidly consecutive onclick events.
➔ The duration of the rapid succession of clicks to generate an ondbleclick event is determined by the underlying operating system. JavaScript cannot delay or speed it up.
➔ Relying solely on the ondblclick event results in a poor user experience for users with motor, cognitive, or visual impairments.
➔ Screen reader or touch device users should have an alternative implementation of double click, as they often only have keyboard access and double click is used for the zoom in/out function on touch devices.
➔ It is recommended to implement core functionality with a single click and optional or convenient shortcuts with a double click.
➔ Except for elements like head, meta, script, base, style, and title, most elements support the ondblclick event.
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.