.dblclick() JQ Home  <<  Events  <<  .dblclick()

• <<    .click()
• .hover()     >>

Mouse double click event handler.

Description

The .dblclick() method is used to bind an event handler to The JavaScript dblclick event or trigger that event on the specified element.

• The dblclick event is sent to an element when:
  1. The mouse pointer is inside the element and the primary mouse button is pressed down.
  2. The primary mouse button is then released while the mouse pointer is inside the element.
  3. The mouse pointer is inside the element and the primary mouse button is pressed down again within a time window that can be system dependant and user configurable.
  4. The primary mouse button is then released again while the mouse pointer is inside the element.
• It is not best practice to bind event handlers to both the .click() and dblclick events for the same element:
  1. The sequence of events triggered can vary from browser to browser, with some browsers receiving two .click() events before the dblclick event while other browsers receive only one
  2. Double-click sensitivity, which is the maximum time between clicks that will be detected as a double click, can be system dependant and is generally user configurable.

Syntax

Parameters

Return

A jQuery object.

.dblclick( ) Example  Events  <<  Top

Trigger the dblclick JavaScript event on the specified element.

• This signature is a shortcut for .trigger('dblclick').

In the example below we toggle the pie image with the id of 'pie1' when the user double clicks anywhere in the div with an id of 'div1' or double clicks the button below.

When the user double clicks the button we trigger off the dblclick JavaScript event on the 'div14' element. This then fires off the $('#div1').dblclick(function(){}) code which shows the image.

Alternatively if you just dblclick in the division the dblclick event handler runs without being triggered to toggle the image.

$(function(){
  $('#btn1').dblclick(function () {
    $('#div1').dblclick();
  });

  $('#div1').dblclick(function () {
    $('#pie1').toggle();
  });
});

.dblclick( handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the dblclick JavaScript event.

• This signature is a shortcut for .on('dblclick', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'div' element with an id of 'div2' below is hovered over and the primary mouse button is double clicked inside this element.

When the primary mouse button is double clicked inside the element, the dblclick JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.

$(function(){
  $('#div2').dblclick(addText);

  function addText(event) {
    $('#scrollspan1').append('dblclick 1 **JavaScript event triggered**<br>');
  }
});

We will show a message here.

.dblclick( [eventData ,] handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the dblclick JavaScript event, optionally passing an object of data.

• This signature is a shortcut for .on('dblclick', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the 'div' element with an id of 'div3' below is hovered over and the primary mouse button is double clicked inside this element.

When the primary mouse button is double clicked inside this element, the dblclick JavaScript event fires off the $('#div3').dblclick({ param1: '#scrollspan2', param2: 'dblclick 2 ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'dblclick 2 ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.

$(function(){
  $('#div3').dblclick({ param1: '#scrollspan2', param2: 'dblclick ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);

  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

We will show a message here.

Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events

• <<    .click()
• .hover()     >>