# .dblclick()

Categories: Events > Mouse Events

## .dblclick( handler(eventObject) ) Returns: jQuery

Description: Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

- #### version added: 1.0.dblclick( handler(eventObject) )

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.4.3.dblclick( [eventData], handler(eventObject) )

  eventDataA map of data that will be passed to the event handler.

  handler(eventObject)A function to execute each time the event is triggered.

- #### version added: 1.0.dblclick()

This method is a shortcut for `.bind('dblclick', handler)` in the first two variations, and `.trigger('dblclick')` in the third. The `dblclick` event is sent to an element when the element is double-clicked. Any HTML element can receive this event. For example, consider the HTML:

    <div id="target">
      Double-click here
    </div>
    <div id="other">
      Trigger the handler
    </div>

The event handler can be bound to any `<div>`:

    $('#target').dblclick(function() {
      alert('Handler for .dblclick() called.');
    });

Now double-clicking on this element displays the alert:

Handler for .dblclick() called.

To trigger the event manually, apply `.dblclick()` without an argument:

    $('#other').click(function() {
      $('#target').dblclick();
    });

After this code executes, (single) clicks on Trigger the handler will also alert the message.

The `dblclick` event is only triggered after this exact series of events:

- The mouse button is depressed while the pointer is inside the element.
- The mouse button is released while the pointer is inside the element.
- The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.
- The mouse button is released while the pointer is inside the element.

It is inadvisable to bind handlers to both the `click` and `dblclick` events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two `click` events before the `dblclick` and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

### Examples:

#### Example: To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:

    $("p").dblclick( function () { alert("Hello World!"); });

#### Example: Double click to toggle background color.

    <!DOCTYPE html>
    <html>
    <head>
      <style>

      div { background:blue;
            color:white;
            height:100px;
            width:150px;
     }
      div.dbl { background:yellow;color:black; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <div></div><span>Double click the block</span>
    <script>
        var divdbl = $("div:first");
        divdbl.dblclick(function () {
          divdbl.toggleClass('dbl');
        });

    </script>

    </body>
    </html>

#### Demo: