|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Event</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>Event</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p>The <code>event-gestures</code> rollup module provides gesture events such as "flick" and "gesturemove", which normalize user interactions across touch and mouse or pointer based input devices. <code>event-gestures</code> is comprised of two modules - <code>event-flick</code> and <code>event-move</code>.</p> |
|
|
32 |
</div> |
|
|
33 |
|
|
|
34 |
<h2 id="using-event-flick">Using <code>event-flick</code></h2> |
|
|
35 |
|
|
|
36 |
<p>The <code>event-flick</code> module provides a "flick" event which notifies users interested in a "flick" gesture, providing distance, time and velocity information. Listening to a "flick" event is easy:</p> |
|
|
37 |
|
|
|
38 |
<pre class="code prettyprint">node.on("flick", function (event) { |
|
|
39 |
Y.log("I was flicked!"); |
|
|
40 |
});</pre> |
|
|
41 |
|
|
|
42 |
|
|
|
43 |
<h3 id="configuring-the-flick-event">Configuring the Flick Event</h3> |
|
|
44 |
|
|
|
45 |
<p>To configure the firing of the "flick" event, you can pass in an optional configuration object. Check the <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_flick" alt="API Docs for Flick">API Docs</a> for a full list of keys that can be supplied into the config object.</p> |
|
|
46 |
|
|
|
47 |
<h2 id="using-event-move">Using <code>event-move</code></h2> |
|
|
48 |
|
|
|
49 |
<p>The <code>event-move</code> module provides "gesturemovestart", "gesturemove" and "gesturemoveend" events, which can be used to normalize drag type interactions across touch and mouse devices. These are very easy to use, but can be quite powerful.</p> |
|
|
50 |
|
|
|
51 |
<pre class="code prettyprint">node.on("gesturemovestart", function (event) { |
|
|
52 |
Y.log("gesturemovestart was called"); |
|
|
53 |
}); |
|
|
54 |
|
|
|
55 |
node.on("gesturemove", function (event) { |
|
|
56 |
Y.log("gesturemove was called"); |
|
|
57 |
}); |
|
|
58 |
|
|
|
59 |
node.on("gesturemoveend", function (event) { |
|
|
60 |
Y.log("gesturemoveend was called"); |
|
|
61 |
});</pre> |
|
|
62 |
|
|
|
63 |
|
|
|
64 |
<h3 id="gesture-events-in-different-environments">Gesture events in different environments</h3> |
|
|
65 |
|
|
|
66 |
<p>The <code>event-move</code> module normalizes gestures across mouse and touch environments.</p> |
|
|
67 |
|
|
|
68 |
<table> |
|
|
69 |
<thead> |
|
|
70 |
<tr> |
|
|
71 |
<th>Environment</th> |
|
|
72 |
<th><code>gesturemovestart</code></th> |
|
|
73 |
<th><code>gesturemove</code></th> |
|
|
74 |
<th><code>gesturemoveend</code></th> |
|
|
75 |
</th> |
|
|
76 |
</thead> |
|
|
77 |
<tbody> |
|
|
78 |
<tr> |
|
|
79 |
<td>Mouse</td> |
|
|
80 |
<td><code>mousedown</code></td> |
|
|
81 |
<td><code>mousemove</code></td> |
|
|
82 |
<td><code>mouseup</code></td> |
|
|
83 |
</tr> |
|
|
84 |
<tr> |
|
|
85 |
<td>Touch</td> |
|
|
86 |
<td><code>touchstart</code></td> |
|
|
87 |
<td><code>touchmove</code></td> |
|
|
88 |
<td><code>touchend</code></td> |
|
|
89 |
</tr> |
|
|
90 |
<tr> |
|
|
91 |
<td>MSPointer</td> |
|
|
92 |
<td><code>MSPointerDown</code></td> |
|
|
93 |
<td><code>MSPointerMove</code></td> |
|
|
94 |
<td><code>MSPointerUp</code></td> |
|
|
95 |
</tr> |
|
|
96 |
</tbody> |
|
|
97 |
</table> |
|
|
98 |
|
|
|
99 |
<h3 id="configuring-gesture-events">Configuring gesture events</h3> |
|
|
100 |
|
|
|
101 |
<p>By default, the "gesturemove" and "gesturemoveend" events only fire when the same node has subscribed to the "gesturemovestart" event as well. This can be over-ridden by setting <code>{standAlone: true}</code> in the configuration properties when subscribing to these events.</p> |
|
|
102 |
|
|
|
103 |
<p>Generally, a "gesturemovestart" and "gesturemoveend" event fires once, while the "gesturemove" event fires repeatedly as the mouse/finger moves across the screen. Each of these events also accept a config object to control their firing. Refer to the <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_gesturemovestart" alt="Gesture API Docs">API Docs</a> for more information.</p> |
|
|
104 |
|
|
|
105 |
<h3 id="ie10-gestures-and--ms-touch-action">IE10, Gestures, and <code>-ms-touch-action</code></h3> |
|
|
106 |
|
|
|
107 |
<p>IE10 introduces the <a href="http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx" alt="MSPointer Events">MSPointer</a> events, which normalize mouse/touch/pen inputs in IE10. <code>event-move</code> takes advantage of these new events, and automatically use them on supported environments.</p> |
|
|
108 |
|
|
|
109 |
<p>Another new aspect of IE10 is the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx" alt="MSTouchAction Property"><code>ms-touch-action</code></a> CSS property. This CSS property tells IE10 whether to permit default touch behavior or not. Examples of default touch behavior include panning the page, pinching, and double-tapping to zoom.</p> |
|
|
110 |
|
|
|
111 |
<p>To prevent default behavior, Microsoft suggests setting <code>-ms-touch-action: none</code> for elements on which you do not want the default touch behavior to occur. We have <a href="https://connect.microsoft.com/IE/feedback/details/767646/ms-touch-action-does-not-allow-a-way-to-programmatically-prevent-default-touch-behavior" alt="msTouchAction Bug">filed a bug</a>against IE10 regarding the prevention of default touch behavior.</p> |
|
|
112 |
|
|
|
113 |
<p>If you want an element to have an <code>-ms-touch-action</code> value other than <code>none</code>, the current workaround is to set that via JavaScript inside the "gesturemovestart" event:</p> |
|
|
114 |
|
|
|
115 |
<pre class="code prettyprint">//On IE10, attaching gesturemovestart will set horizontalScrollingNode's msTouchAction property to none. |
|
|
116 |
horizontalScrollingNode.on("gesturemovestart", function (e) { |
|
|
117 |
|
|
|
118 |
/* |
|
|
119 |
* If we want to be able to swipe horizontally through the element, |
|
|
120 |
* but still scroll the page when we swipe horizontally or pinch-zoom, |
|
|
121 |
* we can set that via JavaScript in the styles property |
|
|
122 |
*/ |
|
|
123 |
horizontalScrollingNode.getDOMNode().style.msTouchAction = 'pan-y | pinch-zoom'; |
|
|
124 |
});</pre> |
|
|
125 |
|
|
|
126 |
|
|
|
127 |
<p>If you wish to change the default <code>-ms-touch-action</code> value to be something other than <code>none</code>, you can change the default by modifying the <code>Y.Event._DEFAULT_TOUCH_ACTION</code>. Please note that this property may be changed in the future, depending on the resolution of and is subject to change based on the resolution of <a href="https://connect.microsoft.com/IE/feedback/details/767646/ms-touch-action-does-not-allow-a-way-to-programmatically-prevent-default-touch-behavior" alt="msTouchAction bug">this ticket</a> or a change in the <code>-ms-touch-action</code> implementation.</p> |
|
|
128 |
|
|
|
129 |
<h3 id="known-issues-in-ie10-touch-mode">Known Issues in IE10 Touch Mode</h3> |
|
|
130 |
|
|
|
131 |
<p>If you are using the <code>event-tap</code> or <code>event-flick</code> modules in IE10 on a touch-enabled device (ie: not mouse-based), you will need to set the <code>-ms-touch-action</code> property manually using CSS. Check out this <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx" alt="Handling Multi-touch in all browsers">example from Microsoft</a>. |
|
|
132 |
|
|
|
133 |
<p>You do not need to do this if you are using the <code>event-move</code> module, since that has support for -ms-touch-action built-in as of YUI3.7.3. You can follow the respective tickets for <a href="http://yuilibrary.com/projects/yui3/ticket/2532869" alt="event-tap mstouchaction ticket"><code>event-tap</code></a> and <a href="http://yuilibrary.com/projects/yui3/ticket/2532868" alt="eventflick mstouchaction ticket"><code>event-flick</code></a>.</p> |
|
|
134 |
|
|
|
135 |
</div> |
|
|
136 |
</div> |
|
|
137 |
</div> |
|
|
138 |
|
|
|
139 |
<div class="yui3-u-1-4"> |
|
|
140 |
<div class="sidebar"> |
|
|
141 |
|
|
|
142 |
<div id="toc" class="sidebox"> |
|
|
143 |
<div class="hd"> |
|
|
144 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
145 |
</div> |
|
|
146 |
|
|
|
147 |
<div class="bd"> |
|
|
148 |
<ul class="toc"> |
|
|
149 |
<li> |
|
|
150 |
<a href="#using-event-flick">Using <code>event-flick</code></a> |
|
|
151 |
<ul class="toc"> |
|
|
152 |
<li> |
|
|
153 |
<a href="#configuring-the-flick-event">Configuring the Flick Event</a> |
|
|
154 |
</li> |
|
|
155 |
</ul> |
|
|
156 |
</li> |
|
|
157 |
<li> |
|
|
158 |
<a href="#using-event-move">Using <code>event-move</code></a> |
|
|
159 |
<ul class="toc"> |
|
|
160 |
<li> |
|
|
161 |
<a href="#gesture-events-in-different-environments">Gesture events in different environments</a> |
|
|
162 |
</li> |
|
|
163 |
<li> |
|
|
164 |
<a href="#configuring-gesture-events">Configuring gesture events</a> |
|
|
165 |
</li> |
|
|
166 |
<li> |
|
|
167 |
<a href="#ie10-gestures-and--ms-touch-action">IE10, Gestures, and <code>-ms-touch-action</code></a> |
|
|
168 |
</li> |
|
|
169 |
<li> |
|
|
170 |
<a href="#known-issues-in-ie10-touch-mode">Known Issues in IE10 Touch Mode</a> |
|
|
171 |
</li> |
|
|
172 |
</ul> |
|
|
173 |
</li> |
|
|
174 |
</ul> |
|
|
175 |
</div> |
|
|
176 |
</div> |
|
|
177 |
|
|
|
178 |
|
|
|
179 |
|
|
|
180 |
<div class="sidebox"> |
|
|
181 |
<div class="hd"> |
|
|
182 |
<h2 class="no-toc">Examples</h2> |
|
|
183 |
</div> |
|
|
184 |
|
|
|
185 |
<div class="bd"> |
|
|
186 |
<ul class="examples"> |
|
|
187 |
|
|
|
188 |
|
|
|
189 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
190 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
191 |
</li> |
|
|
192 |
|
|
|
193 |
|
|
|
194 |
|
|
|
195 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
196 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
197 |
</li> |
|
|
198 |
|
|
|
199 |
|
|
|
200 |
|
|
|
201 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
202 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
203 |
</li> |
|
|
204 |
|
|
|
205 |
|
|
|
206 |
|
|
|
207 |
|
|
|
208 |
|
|
|
209 |
|
|
|
210 |
|
|
|
211 |
|
|
|
212 |
|
|
|
213 |
|
|
|
214 |
|
|
|
215 |
|
|
|
216 |
</ul> |
|
|
217 |
</div> |
|
|
218 |
</div> |
|
|
219 |
|
|
|
220 |
|
|
|
221 |
|
|
|
222 |
<div class="sidebox"> |
|
|
223 |
<div class="hd"> |
|
|
224 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
225 |
</div> |
|
|
226 |
|
|
|
227 |
<div class="bd"> |
|
|
228 |
<ul class="examples"> |
|
|
229 |
|
|
|
230 |
|
|
|
231 |
|
|
|
232 |
|
|
|
233 |
|
|
|
234 |
|
|
|
235 |
|
|
|
236 |
|
|
|
237 |
<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."> |
|
|
238 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
239 |
</li> |
|
|
240 |
|
|
|
241 |
|
|
|
242 |
|
|
|
243 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
244 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
245 |
</li> |
|
|
246 |
|
|
|
247 |
|
|
|
248 |
|
|
|
249 |
<li data-description="Example Photo Browser application."> |
|
|
250 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
251 |
</li> |
|
|
252 |
|
|
|
253 |
|
|
|
254 |
|
|
|
255 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
256 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
257 |
</li> |
|
|
258 |
|
|
|
259 |
|
|
|
260 |
|
|
|
261 |
<li data-description="Use IO to request data over HTTP."> |
|
|
262 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
263 |
</li> |
|
|
264 |
|
|
|
265 |
|
|
|
266 |
</ul> |
|
|
267 |
</div> |
|
|
268 |
</div> |
|
|
269 |
|
|
|
270 |
</div> |
|
|
271 |
</div> |
|
|
272 |
</div> |
|
|
273 |
</div> |
|
|
274 |
|
|
|
275 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
276 |
<script>prettyPrint();</script> |
|
|
277 |
|
|
|
278 |
<script> |
|
|
279 |
YUI.Env.Tests = { |
|
|
280 |
examples: [], |
|
|
281 |
project: '../assets', |
|
|
282 |
assets: '../assets/event', |
|
|
283 |
name: 'event', |
|
|
284 |
title: 'Event', |
|
|
285 |
newWindow: '', |
|
|
286 |
auto: false |
|
|
287 |
}; |
|
|
288 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
289 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
290 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
291 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
292 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
293 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
294 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
295 |
YUI.Env.Tests.examples.push('get'); |
|
|
296 |
|
|
|
297 |
</script> |
|
|
298 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
299 |
|
|
|
300 |
|
|
|
301 |
|
|
|
302 |
</body> |
|
|
303 |
</html> |