forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclick.xml
79 lines (78 loc) · 3.27 KB
/
click.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
<?xml version="1.0"?>
<entry type="method" name="click" return="jQuery">
<title>.click()</title>
<desc>Bind an event handler to the "click" 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>In the first two variations, this method is a shortcut for <code>.bind("click", handler)</code>, as well as for <code>.on("click", handler)</code> as of jQuery 1.7. In the third variation, when <code>.click()</code> is called without arguments, it is a shortcut for <code>.trigger("click")</code>. </p>
<p>The <code>click</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.</p>
<pre><code>For example, consider the HTML:
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div></code></pre>
<p class="image">
<img src="/resources/0042_05_03.png" alt=""/>
</p>
<p>The event handler can be bound to any <code><div></code>:</p>
<pre><code>$("#target").click(function() {
alert("Handler for .click() called.");
});</code></pre>
<p>Now if we click on this element, the alert is displayed:</p>
<p>
<span class="output">Handler for .click() called.</span>
</p>
<p>We can also trigger the event when a different element is clicked:</p>
<pre><code>$("#other").click(function() {
$("#target").click();
});</code></pre>
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
<p>The <code>click</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>
</ul>
<p>This is usually the desired sequence before taking an action. If this is not required, the <code>mousedown</code> or <code>mouseup</code> event may be more suitable.</p>
</longdesc>
<example>
<desc>Hide paragraphs on a page when they are clicked:</desc>
<code><![CDATA[
$("p").click(function () {
$(this).slideUp();
});
]]></code>
<css><![CDATA[
p { color:red; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
]]></css>
<html><![CDATA[<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>]]></html>
</example>
<example>
<desc>Trigger the click event on all of the paragraphs on the page:</desc>
<code><![CDATA[$("p").click();]]></code>
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
<category slug="version/1.4.3"/>
</entry>