forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdblclick.xml
120 lines (117 loc) · 4.43 KB
/
dblclick.xml
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<?xml version="1.0"?>
<entries>
<desc>Bind an event handler to the "dblclick" event, or trigger that event on an element.</desc>
<entry type="method" name="on" return="jQuery">
<title>dblclick event</title>
<desc>Bind an event handler to the "dblclick" event.</desc>
<signature>
<added>1.7</added>
<argument name=""dblclick"" type="string">
<desc>The string <code>"dblclick"</code>.</desc>
</argument>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute each time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</argument>
</signature>
<longdesc>
<div class="warning">
<p>This page describes the <code>dblclick</code> event. For the deprecated <code>.dblclick()</code> method, see <a href="/dblclick-shorthand/"><code>.dblclick()</code></a>.</p>
</div>
<p>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><code>
<div id="target">
Double-click here
</div>
<div id="other">
Trigger the handler
</div>
</code></pre>
<figure>
<img src="/resources/0042_05_04.png" alt=""/>
<figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
</figure>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>
$( "#target" ).on( "dblclick", function() {
alert( "Handler for `dblclick` called." );
} );
</code></pre>
<p>Now double-clicking on this element displays the alert:</p>
<p>
<samp>Handler for `dblclick` called.</samp>
</p>
<p>To trigger the event manually, call <code>.trigger( "dblclick" )</code>:</p>
<pre><code>
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "dblclick" );
} );
</code></pre>
<p>After this code executes, (single) clicks on <samp>Trigger the handler</samp> 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 to the dblclick event on every paragraph on the page:</desc>
<code><![CDATA[
$( "p" ).on( "dblclick", function() {
alert( "Hello World!" );
} );
]]></code>
</example>
<example>
<desc>Double click to toggle background color.</desc>
<code><![CDATA[
var divdbl = $( "div" ).first();
divdbl.on( "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.7"/>
</entry>
<entry type="method" name="trigger" return="jQuery">
<title>dblclick event</title>
<desc>Trigger the "dblclick" event on an element.</desc>
<signature>
<added>1.0</added>
<argument name=""dblclick"" type="string">
<desc>The string <code>"dblclick"</code>.</desc>
</argument>
</signature>
<longdesc>
<p>See the description for <a href="#on1"><code>.on( "dblclick", ... )</code></a>.</p>
</longdesc>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
</entry>
</entries>