HTML ondblclick Event Attribute - HTML Mouse Events Attribute

The HTML ondblclick event attribute specifies the JavaScript code to be executed when a user double-clicks on an HTML element. This attribute is part of the Event Attributes in HTML and can be applied to most visible HTML elements.

Example of HTML ondblclick Event Attribute

It will Execute a JavaScript when a button is double-clicked.

index.html

Example: HTML


 <button ondblclick="myFunction()">Double-click me</button>

Output should be:

Definition and Usage of HTML ondblclick Event Attribute

The ondblclick attribute fires on a mouse double-click on the element.

Browser Support of HTML ondblclick Event Attribute

Syntax of HTML ondblclick Event Attribute

< element ondblclick=" script ">

Attribute Values of HTML ondblclick Event Attribute

Value	Description
script	The script to be run on ondblclick

Technical Details of HTML ondblclick Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to Execute a JavaScript when a button is double-clicked

A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".

index.html

Example: HTML


<!DOCTYPE html>
<html>
<body>
<button ondblclick="myFunction()">Double-click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".</p>
<script>
function myFunction() { document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

How to Double-click on a <p> element to change its text color to red

Double-click me to change my text color.

A function is triggered when the p element is double-clicked. The function sets the color of the p element to red.

index.html

Example: HTML


<!DOCTYPE html>
<html>
<body>
<p id="demo" ondblclick="myFunction()">Double-click me to change my text color.</p>
<p>A function is triggered when the p element is double-clicked. The function sets the color of the p element to red.</p>
<script>
function myFunction() { document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>

Output should be:

How to Double-click on a button to copy some text from an input field to another input field

A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.

index.html

Example: HTML


<!DOCTYPE html>
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button ondblclick="myFunction()">Copy Text</button>
<p>A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.</p>
<script>
function myFunction() { document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
</body>
</html>

Output should be:

html event attributes

List of Mouse Events Attribute	HTML Mouse Events Attribute
HTML onclick Event Attribute	HTML Mouse Events Attribute
HTML ondblclick Event Attribute	HTML Mouse Events Attribute
HTML onmousedown Event Attribute	HTML Mouse Events Attribute
HTML onmousemove Event Attribute	HTML Mouse Events Attribute
HTML onmouseout Event Attribute	HTML Mouse Events Attribute
HTML onmouseover Event Attribute	HTML Mouse Events Attribute
HTML onmouseup Event Attribute	HTML Mouse Events Attribute
HTML onwheel Event Attribute	HTML Mouse Events Attribute

Single Articles

Example of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
Definition and Usage of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
Browser Support of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
Syntax of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
Attribute Values of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
Technical Details of HTML ondblclick Event Attribute	HTML Mouse Events Attribute
How to Execute a JavaScript when a button is double-clicked	HTML Mouse Events Attribute
How to Double-click on a <p> element to change its text color to red	HTML Mouse Events Attribute
How to Double-click on a button to copy some text from an input field to another input field	HTML Mouse Events Attribute

Type :	Develop
Category :	Web Tutorial
Sub Category :	HTML Mouse Events Attribute
Uploaded by :	Admin

Read Article

https://horje.com/learn/1434/reference