forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontextmenu.xml
105 lines (102 loc) · 3.48 KB
/
contextmenu.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"?>
<entries>
<desc>Bind an event handler to the "contextmenu" event, or trigger that event on an element.</desc>
<entry type="method" name="on" return="jQuery">
<title>contextmenu event</title>
<desc>Bind an event handler to the "contextmenu" event.</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>
<longdesc>
<div class="warning">
<p>This page describes the <code>contextmenu</code> event. For the deprecated <code>.contextmenu()</code> method, see <a href="/contextmenu-shorthand/"><code>.contextmenu()</code></a>.</p>
</div>
<p>The <code>contextmenu</code> event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the <code>html</code> element or the currently focused element. Any HTML element can receive this event.
For example, consider the HTML:</p>
<pre><code>
<div id="target">
Right-click here
</div>
</code></pre>
<p>The event handler can be bound to the <code><div></code> as follows:</p>
<pre><code>
$( "#target" ).on( "contextmenu", function() {
alert( "Handler for `contextmenu` called." );
} );
</code></pre>
<p>Now right-clicking on this element displays the alert:</p>
<p>
<samp>Handler for `contextmenu` called.</samp>
</p>
<p>To trigger the event manually, use <code>.trigger( "contextmenu" )</code>:</p>
<pre><code>
$( "#target" ).trigger( "contextmenu" );
</code></pre>
</longdesc>
<example>
<desc>To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:</desc>
<code><![CDATA[
$( "p" ).on( "contextmenu", function() {
alert( "Hello World!" );
} );
]]></code>
</example>
<example>
<desc>Right click to toggle background color.</desc>
<code><![CDATA[
var div = $( "div" ).first();
div.on( "contextmenu", function() {
div.toggleClass( "contextmenu" );
} );
]]></code>
<css><![CDATA[
div {
background: blue;
color: white;
height: 100px;
width: 150px;
}
div.contextmenu {
background: yellow;
color: black;
}
]]></css>
<html><![CDATA[
<div></div>
<span>Right 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>contextmenu event</title>
<desc>Trigger the "contextmenu" event on an element.</desc>
<signature>
<added>1.0</added>
<argument name=""contextmenu"" type="string">
<desc>The string <code>"contextmenu"</code>.</desc>
</argument>
</signature>
<longdesc>
<p>See the description for <a href="#on1"><code>.on( "contextmenu", ... )</code></a>.</p>
</longdesc>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
</entry>
</entries>