forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdblclick.xml
105 lines (105 loc) · 3.99 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
<?xml version="1.0"?>
<entry type="method" name="dblclick" return="jQuery">
<title>.dblclick()</title>
<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" type="Function">
<desc>A function to execute each time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</argument>
</signature>
<signature>
<added>1.4.3</added>
<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>
<signature>
<added>1.0</added>
</signature>
<longdesc>
<p>This method is a shortcut for <code>.on( "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><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" ).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>.dblclick()</code> without an argument:</p>
<pre><code>
$( "#other" ).click(function() {
$( "#target" ).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>
<note id="detach-shorthand" type="additional" data-event="dblclick"/>
<example>
<desc>To bind a "Hello World!" alert box to 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>