# .dblclick()

## dblclick ( handler(eventObject) ) Returns: jQuery version added: 1.0

- handler(eventObject)
  Type: Function
  A function to execute each time the event is triggered.

## dblclick ( eventData, handler(eventObject) ) Returns: jQuery version added: 1.4.3

- eventData
  Type: Object
  An object containing data that will be passed to the event handler.

- handler(eventObject)
  Type: Function
  A function to execute each time the event is triggered.

## dblclick ( ) Returns: jQuery version added: 1.0

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

This method is a shortcut for `.on( "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 lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        background: blue;
        color: white;
        height: 100px;
        width: 150px;
     }
      div.dbl {
        background: yellow;
        color: black;
      }

      </style>

      <script src="//code.jquery.com/jquery-1.10.2.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: