api.jquery.com/entries/dblclick.xml at 6587d08478e65bfa1c56c608fd163c497f054950 · jquery/api.jquery.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<entry type='method' name="dblclick" return="jQuery">
  <desc>Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.</desc>
  <signature>
    <added>1.0</added>
    <argument name="handler(eventObject)" type="Function">
      <desc>A function to execute each time the event is triggered.</desc>
    </argument>
  </signature>
  <signature>
    <added>1.4.3</added>
    <argument name="eventData" type="Object" optional="true">
      <desc>A map of data that will be passed to the event handler.</desc>
    </argument>
    <argument name="handler(eventObject)" type="Function">
      <desc>A function to execute each time the event is triggered.</desc>
    </argument>
  </signature>
  <signature>
    <added>1.0</added>
  </signature>

  <longdesc>
    <p>This method is a shortcut for <code>.bind('dblclick', handler)</code> in the first two variations, and <code>.trigger('dblclick')</code> in the third.
    The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
    For example, consider the HTML:</p>
    <pre>&lt;div id="target"&gt;
  Double-click here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>

    <p class="image"><img src="/images/0042_05_04.png" alt="" />
    </p>
    <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
    <pre>$('#target').dblclick(function() {
  alert('Handler for .dblclick() called.');
});</pre>
    <p>Now double-clicking on this element displays the alert:</p>
    <p><span class="output">Handler for .dblclick() called.</span></p>
    <p>To trigger the event manually, apply <code>.dblclick()</code> without an argument:</p>
    <pre>$('#other').click(function() {
  $('#target').dblclick();
});</pre>
    <p>After this code executes, (single) clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
    <p>The <code>dblclick</code> event is only triggered after this exact series of events:</p>
    <ul>
      <li>The mouse button is depressed while the pointer is inside the element.</li>
      <li>The mouse button is released while the pointer is inside the element.</li>
      <li>The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.</li>
      <li>The mouse button is released while the pointer is inside the element.</li>
    </ul>
    <p>It is inadvisable to bind handlers to both the <code>click</code> and <code>dblclick</code> events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two <code>click</code> events before the <code>dblclick</code> 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.
    </p>
  </longdesc>
<example>
  <desc>To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:</desc>
  <code><![CDATA[$("p").dblclick( function () { alert("Hello World!"); });]]></code>
</example>
<example>
  <desc>Double click to toggle background color.</desc>
  <code><![CDATA[
  var divdbl = $("div:first");
  divdbl.dblclick(function () {
    divdbl.toggleClass('dbl');
  });
]]></code>
  <css><![CDATA[
  div { background:blue;
        color:white;
        height:100px;
        width:150px;
 }
  div.dbl { background:yellow;color:black; }
  ]]></css>
  <html><![CDATA[<div></div><span>Double click the block</span>]]></html>
</example>

<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
<category slug="version/1.4.3"/>
</entry>