How to Trigger a Double Click Event in jQuery

This article provides a quick guide on how to programmatically trigger a double click event using jQuery. You will learn the exact syntax required using both the shorthand .dblclick() method and the flexible .trigger() method, complete with practical code examples showing how to bind and fire the event on DOM elements.

The jQuery Double Click Syntaxes

To trigger a double click event programmatically, jQuery provides two primary methods: the dedicated .dblclick() method and the .trigger('dblclick') method.

1. The Shorthand Method: .dblclick()

Calling the .dblclick() method without any arguments immediately fires the double click event on the selected element.

$('#elementId').dblclick();

2. The Generic Trigger Method: .trigger('dblclick')

The .trigger() method allows you to fire any event type by passing its name as a string parameter. This approach is functionally identical to the shorthand method.

$('#elementId').trigger('dblclick');

Complete Example

To see the trigger in action, an event listener must first be bound to the element. The example below sets up a listener and triggers it when a button is clicked.

<button id="target">Double Click Me</button>
<button id="triggerBtn">Trigger Double Click Programmatically</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 1. Attach the double click listener
    $('#target').on('dblclick', function() {
        alert('Double click event was detected!');
    });

    // 2. Trigger the event from another action
    $('#triggerBtn').on('click', function() {
        $('#target').trigger('dblclick');
        // Alternatively: $('#target').dblclick();
    });
});
</script>

Passing Custom Data

If you need to pass additional data along with the event to your handler, use the .trigger() syntax with an array of parameters:

// Binding with custom parameters
$('#target').on('dblclick', function(event, param1, param2) {
    console.log(param1, param2);
});

// Triggering with parameters
$('#target').trigger('dblclick', ['Value 1', 'Value 2']);