|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>The contextmenu Event Fix</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>The contextmenu Event Fix</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><style> |
|
|
31 |
#todo-example { |
|
|
32 |
margin-top: 2em; |
|
|
33 |
max-width: 300px; |
|
|
34 |
*width: 300px; |
|
|
35 |
border: 2px solid #aaa; |
|
|
36 |
padding: 10px; |
|
|
37 |
} |
|
|
38 |
#todo-example legend { |
|
|
39 |
color: #888; |
|
|
40 |
position: relative; |
|
|
41 |
bottom: .4em; |
|
|
42 |
font-size: 1.3em; |
|
|
43 |
*position: auto; |
|
|
44 |
} |
|
|
45 |
#todo-example ol { |
|
|
46 |
list-style: decimal; |
|
|
47 |
padding-left: 0; |
|
|
48 |
margin: 0 0 1em; |
|
|
49 |
} |
|
|
50 |
#todo-example li { |
|
|
51 |
clear: right; |
|
|
52 |
margin-left: 25px; |
|
|
53 |
margin-right: 30px; |
|
|
54 |
*margin-left: 0; |
|
|
55 |
padding: 0; |
|
|
56 |
} |
|
|
57 |
#todo-example .delete-todo { |
|
|
58 |
float: right; |
|
|
59 |
position: relative; |
|
|
60 |
right: -30px; |
|
|
61 |
background: url(../assets/event/remove.png) no-repeat right; |
|
|
62 |
border: 0 none; |
|
|
63 |
width: 30px; |
|
|
64 |
overflow: hidden; |
|
|
65 |
text-indent: 30px; |
|
|
66 |
opacity: 0.5; |
|
|
67 |
*filter: alpha(opacity=50); |
|
|
68 |
} |
|
|
69 |
#todo-example input { |
|
|
70 |
width: 220px; |
|
|
71 |
border: 1px solid #aaa; |
|
|
72 |
xbackground: url(../assets/event/add.png) no-repeat right; |
|
|
73 |
padding: 5px 0 5px 5px; |
|
|
74 |
} |
|
|
75 |
</style> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<h2 id="understanding-the-problem">Understanding the problem</h2> |
|
|
79 |
|
|
|
80 |
<p>You want to add a custom context menu to an element, so you add a "contextmenu" event listener to the element. That listener is going to do two basic things:</p> |
|
|
81 |
|
|
|
82 |
<ol> |
|
|
83 |
<li>Prevent the display of the browser's context menu</li> |
|
|
84 |
<li>Position your custom context menu over top of/relative to the target of the event</li> |
|
|
85 |
</ol> |
|
|
86 |
|
|
|
87 |
<p>The code will look something like this:</p> |
|
|
88 |
|
|
|
89 |
<pre class="code prettyprint">function onContextmenu(e) { |
|
|
90 |
e.preventDefault(); |
|
|
91 |
|
|
|
92 |
if (!contextmenu) { |
|
|
93 |
contextmenu = new Y.Overlay({ |
|
|
94 |
bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>", |
|
|
95 |
visible: false, |
|
|
96 |
constrain: true |
|
|
97 |
}); |
|
|
98 |
contextmenu.render(Y.one("body")); |
|
|
99 |
} |
|
|
100 |
|
|
|
101 |
contextmenu.set("xy", [e.pageX, e.pageY]); |
|
|
102 |
contextmenu.show(); |
|
|
103 |
} |
|
|
104 |
|
|
|
105 |
btn.on("contextmenu", onContextmenu);</pre> |
|
|
106 |
|
|
|
107 |
<p> |
|
|
108 |
This code will work great if the "contextmenu" is triggered via the mouse. However, the "contextmenu" event is one of those device-independent events: can be triggered via the mouse, or the keyboard (on Windows using the Menu key, or the Shift + F10 shortcut). When it's triggered via the keyboard you will run into problems. Here's an overview of the obstacles and inconsistencies by browser + platform: |
|
|
109 |
</p> |
|
|
110 |
|
|
|
111 |
<h3 id="internet-explorer">Internet Explorer</h3> |
|
|
112 |
<ul> |
|
|
113 |
<li>When the user triggers the "contextmenu" event, the x and y coordinates of the event will be relative to the current position of the mouse cursor. Not useful since the event was fired via the keyboard and the mouse cursor could be anywhere on the screen.</li> |
|
|
114 |
<li>When the user presses Shift + F10 IE's menubar will gain focus, with the first item ("File") highlighted. To fix that, you'll need to bind a "keydown" listener for Shift + F10 and call e.preventDefault(). That WILL prevent the menubar from gaining focus, but will also prevent the "contextmenu" event from firing when the user presses Shift + F10.</li> |
|
|
115 |
</ul> |
|
|
116 |
|
|
|
117 |
<h3 id="firefox-on-windows">Firefox on Windows</h3> |
|
|
118 |
<ul> |
|
|
119 |
<li>Shift + F10 won't fire the "contextmenu" event, but WILL trigger the display of the browser's context menu.</li> |
|
|
120 |
<li>If the "contextmenu" event is triggered via the Menu key, the x and y coordinates will be close to the target's bottom left corner.</li> |
|
|
121 |
</ul> |
|
|
122 |
|
|
|
123 |
<h3 id="chrome-on-windows">Chrome on Windows</h3> |
|
|
124 |
<ul> |
|
|
125 |
<li>Both the Menu key and Shift + F10 fire the "contextmenu" event</li> |
|
|
126 |
<li>If the "contextmenu" event is triggered via the Menu key, the x and y coordinates will be close to the target's bottom left corner.</li> |
|
|
127 |
</ul> |
|
|
128 |
|
|
|
129 |
<h3 id="safari-chrome-and-firefox-on-the-mac">Safari, Chrome and Firefox on the Mac</h3> |
|
|
130 |
<ul> |
|
|
131 |
<li>No keyboard shortcut available for triggering the "contextmenu" event, unless the screen reader (VoiceOver) is running, in which case the shortcut is Shift + Ctrl + Alt + M.</li> |
|
|
132 |
<li>When VoiceOver is running and the user presses Shift + Ctrl + Alt + M, the x and y coordinates will reference the center of the event target.</li> |
|
|
133 |
</ul> |
|
|
134 |
|
|
|
135 |
<h3 id="opera">Opera</h3> |
|
|
136 |
<ul> |
|
|
137 |
<li>On Windows, Shift + F10 won't fire the "contextmenu" event, but WILL trigger the display of the browser's context menu.</li> |
|
|
138 |
<li>On Mac, Shift + Command + M won't fire "contextmenu" event, but WILL trigger the display of the browser's context menu.</li> |
|
|
139 |
</ul> |
|
|
140 |
|
|
|
141 |
<p>Here's a working example. The following button has a custom context menu. Try to invoke it via the keyboard to see the problems yourself:</p> |
|
|
142 |
|
|
|
143 |
<style type="text/css"> |
|
|
144 |
|
|
|
145 |
.contextmenu { |
|
|
146 |
background: #ccc; |
|
|
147 |
padding: 0; |
|
|
148 |
margin: 0; |
|
|
149 |
list-style-type: none; |
|
|
150 |
} |
|
|
151 |
|
|
|
152 |
.contextmenu li { |
|
|
153 |
white-space: nowrap; |
|
|
154 |
} |
|
|
155 |
|
|
|
156 |
</style> |
|
|
157 |
<button type="button" id="btn-1">I've got a context menu</button> |
|
|
158 |
<script type="text/javascript"> |
|
|
159 |
|
|
|
160 |
YUI().use("overlay", function (Y) { |
|
|
161 |
|
|
|
162 |
var btn = Y.one("#btn-1"), |
|
|
163 |
contextmenu; |
|
|
164 |
|
|
|
165 |
function onContextmenu(e) { |
|
|
166 |
e.preventDefault(); |
|
|
167 |
|
|
|
168 |
if (!contextmenu) { |
|
|
169 |
contextmenu = new Y.Overlay({ |
|
|
170 |
bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>", |
|
|
171 |
visible: false, |
|
|
172 |
constrain: true |
|
|
173 |
}); |
|
|
174 |
contextmenu.render(Y.one("body")); |
|
|
175 |
} |
|
|
176 |
|
|
|
177 |
contextmenu.set("xy", [e.pageX, e.pageY]); |
|
|
178 |
contextmenu.show(); |
|
|
179 |
} |
|
|
180 |
|
|
|
181 |
|
|
|
182 |
btn.on("contextmenu", onContextmenu); |
|
|
183 |
|
|
|
184 |
}); |
|
|
185 |
|
|
|
186 |
</script> |
|
|
187 |
|
|
|
188 |
|
|
|
189 |
<h2 id="the-value-of-the-contextmenu-synthetic-event">The value of the "contextmenu" synthetic event</h2> |
|
|
190 |
|
|
|
191 |
<p>Returning to the task at hand, as a developer you just want to bind a single "contextmenu" event listener and have it do the right thing regardless of how the event was triggered. This is what the "contextmenu" synthetic event does; it fixes all the aforementioned problems and inconsistencies while maintaining the same signature as a standard "contextmenu" DOM event. Additionally, it provides two bits of sugar:</p> |
|
|
192 |
|
|
|
193 |
<ol> |
|
|
194 |
<li>Prevents the display of the browser's context menu. (Since you're likely going to be doing that anyway.)</li> |
|
|
195 |
<li>Follows Safari's model such that when the "contextmenu" event is fired via the keyboard, the x and y coordinates of the event will reference the center of the target.</li> |
|
|
196 |
</ol> |
|
|
197 |
|
|
|
198 |
<p>All that's required to use the "contextmenu" synthetic event is to add "event-contextmenu" to the use() statement.</p> |
|
|
199 |
|
|
|
200 |
<pre class="code prettyprint">YUI().use("event-contextmenu", function (Y) { |
|
|
201 |
|
|
|
202 |
});</pre> |
|
|
203 |
|
|
|
204 |
<p>Here's a working example: The following button has a custom context menu. On Windows the context menu can be invoked by pressing either Menu or using Shift + F10, on the Mac use Shift + Ctrl + Alt + M.</p> |
|
|
205 |
|
|
|
206 |
<button type="button" id="btn-2">I've got a context menu</button> |
|
|
207 |
<script type="text/javascript"> |
|
|
208 |
|
|
|
209 |
YUI().use("event-contextmenu", "overlay", function (Y) { |
|
|
210 |
|
|
|
211 |
var btn = Y.one("#btn-2"), |
|
|
212 |
contextmenu; |
|
|
213 |
|
|
|
214 |
function onContextmenu(e) { |
|
|
215 |
|
|
|
216 |
if (!contextmenu) { |
|
|
217 |
contextmenu = new Y.Overlay({ |
|
|
218 |
bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>", |
|
|
219 |
visible: false, |
|
|
220 |
constrain: true |
|
|
221 |
}); |
|
|
222 |
contextmenu.render(Y.one("body")); |
|
|
223 |
} |
|
|
224 |
|
|
|
225 |
contextmenu.set("xy", [e.pageX, e.pageY]); |
|
|
226 |
contextmenu.show(); |
|
|
227 |
} |
|
|
228 |
|
|
|
229 |
|
|
|
230 |
btn.on("contextmenu", onContextmenu); |
|
|
231 |
|
|
|
232 |
}); |
|
|
233 |
|
|
|
234 |
</script> |
|
|
235 |
<p>Here's the code for the example:</p> |
|
|
236 |
|
|
|
237 |
<pre class="code prettyprint">YUI().use("event-contextmenu", "overlay", function (Y) { |
|
|
238 |
|
|
|
239 |
var btn = Y.one("#btn-2"), |
|
|
240 |
contextmenu; |
|
|
241 |
|
|
|
242 |
function onContextmenu(e) { |
|
|
243 |
|
|
|
244 |
if (!contextmenu) { |
|
|
245 |
contextmenu = new Y.Overlay({ |
|
|
246 |
bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>", |
|
|
247 |
visible: false, |
|
|
248 |
constrain: true |
|
|
249 |
}); |
|
|
250 |
contextmenu.render(Y.one("body")); |
|
|
251 |
} |
|
|
252 |
|
|
|
253 |
contextmenu.set("xy", [e.pageX, e.pageY]); |
|
|
254 |
contextmenu.show(); |
|
|
255 |
} |
|
|
256 |
|
|
|
257 |
|
|
|
258 |
btn.on("contextmenu", onContextmenu); |
|
|
259 |
|
|
|
260 |
});</pre> |
|
|
261 |
|
|
|
262 |
</div> |
|
|
263 |
</div> |
|
|
264 |
</div> |
|
|
265 |
|
|
|
266 |
<div class="yui3-u-1-4"> |
|
|
267 |
<div class="sidebar"> |
|
|
268 |
|
|
|
269 |
<div id="toc" class="sidebox"> |
|
|
270 |
<div class="hd"> |
|
|
271 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
272 |
</div> |
|
|
273 |
|
|
|
274 |
<div class="bd"> |
|
|
275 |
<ul class="toc"> |
|
|
276 |
<li> |
|
|
277 |
<a href="#understanding-the-problem">Understanding the problem</a> |
|
|
278 |
<ul class="toc"> |
|
|
279 |
<li> |
|
|
280 |
<a href="#internet-explorer">Internet Explorer</a> |
|
|
281 |
</li> |
|
|
282 |
<li> |
|
|
283 |
<a href="#firefox-on-windows">Firefox on Windows</a> |
|
|
284 |
</li> |
|
|
285 |
<li> |
|
|
286 |
<a href="#chrome-on-windows">Chrome on Windows</a> |
|
|
287 |
</li> |
|
|
288 |
<li> |
|
|
289 |
<a href="#safari-chrome-and-firefox-on-the-mac">Safari, Chrome and Firefox on the Mac</a> |
|
|
290 |
</li> |
|
|
291 |
<li> |
|
|
292 |
<a href="#opera">Opera</a> |
|
|
293 |
</li> |
|
|
294 |
</ul> |
|
|
295 |
</li> |
|
|
296 |
<li> |
|
|
297 |
<a href="#the-value-of-the-contextmenu-synthetic-event">The value of the "contextmenu" synthetic event</a> |
|
|
298 |
</li> |
|
|
299 |
</ul> |
|
|
300 |
</div> |
|
|
301 |
</div> |
|
|
302 |
|
|
|
303 |
|
|
|
304 |
|
|
|
305 |
<div class="sidebox"> |
|
|
306 |
<div class="hd"> |
|
|
307 |
<h2 class="no-toc">Examples</h2> |
|
|
308 |
</div> |
|
|
309 |
|
|
|
310 |
<div class="bd"> |
|
|
311 |
<ul class="examples"> |
|
|
312 |
|
|
|
313 |
|
|
|
314 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
315 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
316 |
</li> |
|
|
317 |
|
|
|
318 |
|
|
|
319 |
|
|
|
320 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
321 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
322 |
</li> |
|
|
323 |
|
|
|
324 |
|
|
|
325 |
|
|
|
326 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
327 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
328 |
</li> |
|
|
329 |
|
|
|
330 |
|
|
|
331 |
|
|
|
332 |
|
|
|
333 |
|
|
|
334 |
|
|
|
335 |
|
|
|
336 |
|
|
|
337 |
|
|
|
338 |
|
|
|
339 |
|
|
|
340 |
|
|
|
341 |
</ul> |
|
|
342 |
</div> |
|
|
343 |
</div> |
|
|
344 |
|
|
|
345 |
|
|
|
346 |
|
|
|
347 |
<div class="sidebox"> |
|
|
348 |
<div class="hd"> |
|
|
349 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
350 |
</div> |
|
|
351 |
|
|
|
352 |
<div class="bd"> |
|
|
353 |
<ul class="examples"> |
|
|
354 |
|
|
|
355 |
|
|
|
356 |
|
|
|
357 |
|
|
|
358 |
|
|
|
359 |
|
|
|
360 |
|
|
|
361 |
|
|
|
362 |
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
|
363 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
364 |
</li> |
|
|
365 |
|
|
|
366 |
|
|
|
367 |
|
|
|
368 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
369 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
370 |
</li> |
|
|
371 |
|
|
|
372 |
|
|
|
373 |
|
|
|
374 |
<li data-description="Example Photo Browser application."> |
|
|
375 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
376 |
</li> |
|
|
377 |
|
|
|
378 |
|
|
|
379 |
|
|
|
380 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
381 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
382 |
</li> |
|
|
383 |
|
|
|
384 |
|
|
|
385 |
|
|
|
386 |
<li data-description="Use IO to request data over HTTP."> |
|
|
387 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
388 |
</li> |
|
|
389 |
|
|
|
390 |
|
|
|
391 |
</ul> |
|
|
392 |
</div> |
|
|
393 |
</div> |
|
|
394 |
|
|
|
395 |
</div> |
|
|
396 |
</div> |
|
|
397 |
</div> |
|
|
398 |
</div> |
|
|
399 |
|
|
|
400 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
401 |
<script>prettyPrint();</script> |
|
|
402 |
|
|
|
403 |
<script> |
|
|
404 |
YUI.Env.Tests = { |
|
|
405 |
examples: [], |
|
|
406 |
project: '../assets', |
|
|
407 |
assets: '../assets/event', |
|
|
408 |
name: 'event', |
|
|
409 |
title: 'The contextmenu Event Fix', |
|
|
410 |
newWindow: '', |
|
|
411 |
auto: false |
|
|
412 |
}; |
|
|
413 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
414 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
415 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
416 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
417 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
418 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
419 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
420 |
YUI.Env.Tests.examples.push('get'); |
|
|
421 |
|
|
|
422 |
</script> |
|
|
423 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
424 |
|
|
|
425 |
|
|
|
426 |
|
|
|
427 |
</body> |
|
|
428 |
</html> |