|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>The tap 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>The tap 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-tap</code> module creates a synthetic 'tap' event, that allows for fast-click on touch devices, while supporting mouse events as well.</p> |
|
|
32 |
|
|
|
33 |
<p>On touch devices (especially iOS), listening to 'click' events usually results in a 300ms delay, as the browser waits to see if the user executes a double-click. This slight delay can result in a worsened user-experience. This module aims to correct that by providing the synthetic 'tap' event to listen to. By listening to 'tap', application developers can develop against touch events when they are supported, and fall back to pointer-based input devices.</p> |
|
|
34 |
|
|
|
35 |
</div> |
|
|
36 |
|
|
|
37 |
<h2 id="using-tap">Using Tap</h2> |
|
|
38 |
|
|
|
39 |
<p>To have access to the <code>tap</code> event, you will need to include <code>event-tap</code> in your use statement. Optionally, you could include the entire <code>event</code> module, although this isn't recommended unless you need all the functionality that <code>event</code> provides.</p> |
|
|
40 |
|
|
|
41 |
<p>The <code>tap</code> synthetic event listens to the following DOM events:</p> |
|
|
42 |
|
|
|
43 |
<table> |
|
|
44 |
<thead> |
|
|
45 |
<tr> |
|
|
46 |
<th>Touch supported</th> |
|
|
47 |
<th>Touch not supported</th> |
|
|
48 |
</th> |
|
|
49 |
</thead> |
|
|
50 |
<tbody> |
|
|
51 |
<tr> |
|
|
52 |
<td><code>touchstart</code></td> |
|
|
53 |
<td><code>mousedown</code></td> |
|
|
54 |
</tr> |
|
|
55 |
<tr> |
|
|
56 |
<td><code>touchmove</code></td> |
|
|
57 |
<td><code>mousemove</code></td> |
|
|
58 |
</tr> |
|
|
59 |
<tr> |
|
|
60 |
<td><code>touchend</code></td> |
|
|
61 |
<td><code>mouseup</code></td> |
|
|
62 |
</tr> |
|
|
63 |
<tr> |
|
|
64 |
<td><code>touchcancel</code></td> |
|
|
65 |
<td><code>mousecancel</code></td> |
|
|
66 |
</tr> |
|
|
67 |
</tbody> |
|
|
68 |
</table> |
|
|
69 |
|
|
|
70 |
<p>The easiest way to use <code>tap</code> is to convert your 'click' event listeners to listen for 'tap' instead.</p> |
|
|
71 |
|
|
|
72 |
<pre class="code prettyprint">node.on("tap", function (event) { |
|
|
73 |
this.addClass("tapped"); |
|
|
74 |
});</pre> |
|
|
75 |
|
|
|
76 |
|
|
|
77 |
<p>Tap allows for fast-clicking on touch devices and reverts to mouse events, so it behaves the same way as 'click' on pointer-based devices.</p> |
|
|
78 |
|
|
|
79 |
<h2 id="delegating-taps">Delegating Taps</h2> |
|
|
80 |
|
|
|
81 |
<p>The <code>event-tap</code> module supports event delegation, so you can set up a single event listener to listen for events on all child elements.</p> |
|
|
82 |
|
|
|
83 |
<pre class="code prettyprint">myParentNode.delegate("tap", function (event) { |
|
|
84 |
this.addClass("tapped"); |
|
|
85 |
}, 'li a');</pre> |
|
|
86 |
|
|
|
87 |
|
|
|
88 |
<h2 id="features">Features</h2> |
|
|
89 |
|
|
|
90 |
<p>The <code>event-tap</code> module has the following functionality baked in to it:</p> |
|
|
91 |
|
|
|
92 |
<ul> |
|
|
93 |
<li><code>'tap'</code> only fires if there is one finger on the touchscreen.</li> |
|
|
94 |
<li><code>'tap'</code> does not fire if a 'touchmove' or 'mousemove' is fired. This means that if there is any movement of the finger or pointer, 'tap' will not fire.</li> |
|
|
95 |
<li><code>'tap'</code> does not fire for right mouse button clicks.</li> |
|
|
96 |
</ul> |
|
|
97 |
|
|
|
98 |
<h2 id="caveats-and-other-information">Caveats and other information</h2> |
|
|
99 |
|
|
|
100 |
As of now, <code>event-tap</code> does not work on Windows 8 Tablets. Windows 8 does not support 'touchstart', 'touchmove', 'touchend', and 'touchcancel'. Instead, it uses MSPointer events. |
|
|
101 |
|
|
|
102 |
<h3 id="click-events-on-touch-devices">Click Events on Touch Devices</h3> |
|
|
103 |
A <code>click</code> event is still fired after the <code>tap</code> event on touch devices. This can be useful to developers since input elements will not reflect their true value on <code>tap</code>. For example, a radio button will not reflect the correct state on <code>tap</code>, but will on <code>click</code>. |
|
|
104 |
|
|
|
105 |
For this reason, it's best to use the <code>tap</code> event callback as a way to improve your user experience, and use the click event callback to listen for DOM updates. On mouse-based devices, the <code>click</code> event and <code>tap</code> event are fired simultaneously since <code>tap</code> falls back to mouse events in the absence of touch support. |
|
|
106 |
</div> |
|
|
107 |
</div> |
|
|
108 |
</div> |
|
|
109 |
|
|
|
110 |
<div class="yui3-u-1-4"> |
|
|
111 |
<div class="sidebar"> |
|
|
112 |
|
|
|
113 |
<div id="toc" class="sidebox"> |
|
|
114 |
<div class="hd"> |
|
|
115 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
116 |
</div> |
|
|
117 |
|
|
|
118 |
<div class="bd"> |
|
|
119 |
<ul class="toc"> |
|
|
120 |
<li> |
|
|
121 |
<a href="#using-tap">Using Tap</a> |
|
|
122 |
</li> |
|
|
123 |
<li> |
|
|
124 |
<a href="#delegating-taps">Delegating Taps</a> |
|
|
125 |
</li> |
|
|
126 |
<li> |
|
|
127 |
<a href="#features">Features</a> |
|
|
128 |
</li> |
|
|
129 |
<li> |
|
|
130 |
<a href="#caveats-and-other-information">Caveats and other information</a> |
|
|
131 |
<ul class="toc"> |
|
|
132 |
<li> |
|
|
133 |
<a href="#click-events-on-touch-devices">Click Events on Touch Devices</a> |
|
|
134 |
</li> |
|
|
135 |
</ul> |
|
|
136 |
</li> |
|
|
137 |
</ul> |
|
|
138 |
</div> |
|
|
139 |
</div> |
|
|
140 |
|
|
|
141 |
|
|
|
142 |
|
|
|
143 |
<div class="sidebox"> |
|
|
144 |
<div class="hd"> |
|
|
145 |
<h2 class="no-toc">Examples</h2> |
|
|
146 |
</div> |
|
|
147 |
|
|
|
148 |
<div class="bd"> |
|
|
149 |
<ul class="examples"> |
|
|
150 |
|
|
|
151 |
|
|
|
152 |
<li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
|
153 |
<a href="basic-example.html">Simple DOM Events</a> |
|
|
154 |
</li> |
|
|
155 |
|
|
|
156 |
|
|
|
157 |
|
|
|
158 |
<li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed."> |
|
|
159 |
<a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a> |
|
|
160 |
</li> |
|
|
161 |
|
|
|
162 |
|
|
|
163 |
|
|
|
164 |
<li data-description="Supporting cross-device swipe gestures, using the event-move gesture events"> |
|
|
165 |
<a href="swipe-example.html">Supporting A Swipe Left Gesture</a> |
|
|
166 |
</li> |
|
|
167 |
|
|
|
168 |
|
|
|
169 |
|
|
|
170 |
|
|
|
171 |
|
|
|
172 |
|
|
|
173 |
|
|
|
174 |
|
|
|
175 |
|
|
|
176 |
|
|
|
177 |
|
|
|
178 |
|
|
|
179 |
</ul> |
|
|
180 |
</div> |
|
|
181 |
</div> |
|
|
182 |
|
|
|
183 |
|
|
|
184 |
|
|
|
185 |
<div class="sidebox"> |
|
|
186 |
<div class="hd"> |
|
|
187 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
188 |
</div> |
|
|
189 |
|
|
|
190 |
<div class="bd"> |
|
|
191 |
<ul class="examples"> |
|
|
192 |
|
|
|
193 |
|
|
|
194 |
|
|
|
195 |
|
|
|
196 |
|
|
|
197 |
|
|
|
198 |
|
|
|
199 |
|
|
|
200 |
<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."> |
|
|
201 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
202 |
</li> |
|
|
203 |
|
|
|
204 |
|
|
|
205 |
|
|
|
206 |
<li data-description="Shows how to extend the base widget class, to create your own Widgets."> |
|
|
207 |
<a href="../widget/widget-extend.html">Extending the Base Widget Class</a> |
|
|
208 |
</li> |
|
|
209 |
|
|
|
210 |
|
|
|
211 |
|
|
|
212 |
<li data-description="Example Photo Browser application."> |
|
|
213 |
<a href="../dd/photo-browser.html">Photo Browser</a> |
|
|
214 |
</li> |
|
|
215 |
|
|
|
216 |
|
|
|
217 |
|
|
|
218 |
<li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
|
219 |
<a href="../dd/portal-drag.html">Portal Style Example</a> |
|
|
220 |
</li> |
|
|
221 |
|
|
|
222 |
|
|
|
223 |
|
|
|
224 |
<li data-description="Use IO to request data over HTTP."> |
|
|
225 |
<a href="../io/get.html">HTTP GET to request data</a> |
|
|
226 |
</li> |
|
|
227 |
|
|
|
228 |
|
|
|
229 |
</ul> |
|
|
230 |
</div> |
|
|
231 |
</div> |
|
|
232 |
|
|
|
233 |
</div> |
|
|
234 |
</div> |
|
|
235 |
</div> |
|
|
236 |
</div> |
|
|
237 |
|
|
|
238 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
239 |
<script>prettyPrint();</script> |
|
|
240 |
|
|
|
241 |
<script> |
|
|
242 |
YUI.Env.Tests = { |
|
|
243 |
examples: [], |
|
|
244 |
project: '../assets', |
|
|
245 |
assets: '../assets/event', |
|
|
246 |
name: 'event', |
|
|
247 |
title: 'The tap Event', |
|
|
248 |
newWindow: '', |
|
|
249 |
auto: false |
|
|
250 |
}; |
|
|
251 |
YUI.Env.Tests.examples.push('basic-example'); |
|
|
252 |
YUI.Env.Tests.examples.push('synth-example'); |
|
|
253 |
YUI.Env.Tests.examples.push('swipe-example'); |
|
|
254 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
255 |
YUI.Env.Tests.examples.push('widget-extend'); |
|
|
256 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
257 |
YUI.Env.Tests.examples.push('portal-drag'); |
|
|
258 |
YUI.Env.Tests.examples.push('get'); |
|
|
259 |
|
|
|
260 |
</script> |
|
|
261 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
262 |
|
|
|
263 |
|
|
|
264 |
|
|
|
265 |
</body> |
|
|
266 |
</html> |