dblclick

16 March, 2023

Contributors

Milsaware

@milsaware

About

The dblclick event is a DOM event that is triggered when a user double-clicks on an element with a pointing device, such as a mouse or trackpad. It is a shorthand for the combination of two click events. The first click event is triggered when the user presses down the mouse button, and the second click event is triggered when the user releases the mouse button.

The dblclick event can be applied to a wide range of HTML elements such as buttons, links, images, and even entire pages. It is often used in conjunction with other events such as mousedown and mouseup events to create more complex interactions. The dblclick event can be used to trigger actions such as opening a modal window, toggling a dropdown menu, playing a video, or any other action that needs to be performed when the user double-clicks on an element. The dblclick event can also be customised with event listeners and handlers to provide further functionality and control.

Event listener

You can use the addEventListener() method to add a dblclick event listener to an element, and then define a callback function that will be executed when the dblclick event is fired. For example:

HTML

<button id="myButton">Double-Click Me</button>

JavaScript

const myButton = document.getElementById("myButton");

myButton.addEventListener("dblclick", function(event) {
    alert("Button double-clicked!");
});

Here, we have a <button> element with an id of "myButton". We use the getElementById() method to get a reference to this element in JavaScript. We then add a dblclick event listener to this element using the addEventListener() method. Inside the callback function, we use the alert() method to display a message box with the text "Button double-clicked!".

Note that the dblclick event is only triggered when the user double-clicks on an element.

Property

Here is an example of using the ondblclick property to listen for the dblclick event:

// Get the element with the id "myDiv"
const myDiv = document.getElementById("myDiv");

// Define a function to be executed when myDiv is double-clicked
function myFunction() {
    console.log("myDiv was double-clicked!");
}

// Attach the function to the ondblclick event of myDiv
myDiv.ondblclick = myFunction;

Here, we're selecting the div element with the id of myDiv using document.getElementById(). We're then defining a function called myFunction() that will be executed when myDiv is double-clicked. Finally, we're attaching myFunction() to the ondblclick property of myDiv.

Inline

You can use the dblclick event inline in HTML using the ondblclick attribute. Here's an example:

<button id="myButton" ondblclick="alert('Button double-clicked!')">Double-Click Me</button>

Here, we've added the ondblclick attribute to the <button> element, which sets the alert() function to be called when the user double-clicks on the button. When the user triggers the dblclick event, the alert() function is called, which displays a simple message box with the text "Button double-clicked!".

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

You can programmatically trigger the dblclick event on an element using the dispatchEvent() method. Here's an example:

const myButton = document.getElementById("myButton");

myButton.addEventListener("dblclick", function(event) {
    alert("Button double-clicked!");
});

// programmatically trigger dblclick event
const dblclickEvent = new Event('dblclick');
myButton.dispatchEvent(dblclickEvent);

Here, we've added a dblclick event listener to the <button> element using the addEventListener() method, just like in the previous example. We then create a new Event object with the name "dblclick", and use the dispatchEvent() method to trigger the event programmatically.

When the event is triggered, the alert() function defined in the event listener is called, which displays a message box with the text "Button double-clicked!". Note that programmatically triggering events should be used sparingly and only when necessary, as it can be confusing for users and can cause unexpected behaviour in your application.

javascript