forked from patrickhlauke/touch
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
131 lines (111 loc) · 8.62 KB
/
index.html
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang=en>
<head>
<title>Touch/pointer tests and demos</title>
<meta name="viewport" content="width=device-width">
<style>
html,body {
background: #eee;
color: #333;
font: 1em/1.35 Arial, Helvetica, sans;
}
</style>
</head>
<body>
<h1>Touch/pointer tests and demos</h1>
<p>Live versions of the various files at <a href="https://github.com/patrickhlauke/touch">github.com/patrickhlauke/touch</a>.</p>
<p>See the presentation <a href="http://patrickhlauke.github.io/getting-touchy-presentation/"><cite>Getting touchy - an introduction to touch and pointer events</cite></a> for some context and further information on the meaning of these tests and demos.</p>
<h2>Tests</h2>
<p><strong>For a series of interesting results (different browsers, operating systems, assistive technologies), see my <a href="./tests/results/">touch/pointer test results</a>.</strong></p>
<ul>
<li><a href="./tests/touch-feature-detect.html">touch feature detect</a></li>
<li><a href="./tests/event-listener_mouse-only.html">event listener - mouse only</a></li>
<li><a href="./tests/event-listener_all-no-timings.html">event listener - all events, no timings</a></li>
<li><a href="./tests/event-listener_all-no-timings-second-button.html">event listener - all events, no timings, with second focusable/actionable element</a></li>
<li><a href="./tests/event-listener_show-delay.html">event listener - show delay</a></li>
<li><a href="./tests/event-listener_show-delay-no-meta.html">event listener - show delay - no meta viewport</a></li>
<li><a href="./tests/event-listener.html">event listener - all events, including timings</a></li>
<li><a href="./tests/event-listener-scroll.html">event listener - scroll the page, all document events, including timings</a></li>
<li><a href="./tests/event-listener_no-meta-viewport.html">event listener - no meta viewport</a></li>
<li><a href="./tests/event-listener_div.html">event listener - div instead of button</a></li>
<li><a href="./tests/event-listener_div-tabindex.html">event listener - div with tabindex</a></li>
<li><a href="./tests/event-listener_show-delay-naive-event-fix.html">event listener - naive "touch OR mouse" approach</a></li>
<li><a href="./tests/event-listener_prevent-default.html">event listener - prevent default</a></li>
<li><a href="./tests/event-listener_prevent-default-touchstart.html">event listener - prevent default on touchstart</a></li>
<li><a href="./tests/event-listener_prevent-default-touchmove.html">event listener - prevent default on touchmove</a></li>
<li><a href="./tests/event-listener_prevent-default-touchend.html">event listener - prevent default on touchend</a></li>
<li><a href="./tests/event-listener_user-scalable-no.html">event listener - user-scalable=no</a></li>
<li><a href="./tests/event-listener_minimum-maximum-scale.html">event listener - minimum-scale=1,maximum-scale=1</a></li>
<li><a href="./tests/event-listener_width-device-width.html">event listener - width=device-width</a></li>
<li><a href="./tests/event-listener-coordinates.html">event listener - shows coordinates if present (to test VoiceOver, Opera SpatNav, etc behavior)</a></li>
<li><a href="./tests/event-listener_touch-action-none.html">event listener - touch-action:none</a></li>
<li><a href="./tests/event-listener_touch-action-none_no-meta.html">event listener - touch-action:none - no meta viewport</a></li>
<li><a href="./tests/event-listener_touch-action-manipulation.html">event listener - touch-action:manipulation</a></li>
<li><a href="./tests/event-listener_touch-action-manipulation_no-meta.html">event listener - touch-action:manipulation - no meta viewport</a></li>
<li><a href="./tests/event-listener-pointer-over-enter-out-leave.html">event listener - pointer over/enter/out/leave</a></li>
<li><a href="./touchlist-objects/">touchlist objects</a></li>
<li><a href="./gesture-touch/">gesture (e.g. scroll, pinch-zoom) and touchmove/touchend</a> (spec grey area)</li>
</ul>
<ul>
<li><a href="./ios-clickable/">iOS - Making Elements Clickable</a></li>
<li><a href="./bubbling/button.html">event bubbling - button</a></li>
<li><a href="./bubbling/link.html">event bubbling - link</a></li>
<li><a href="./bubbling/div.html">event bubbling - div</a></li>
<li><a href="./bubbling/div-tabindex.html">event bubbling - div with tabindex=0</a></li>
<li><a href="./bubbling/div-tabindex-role.html">event bubbling - div with tabindex=0 and role=button</a></li>
<li><a href="./bubbling/div-onclick-target.html">event bubbling - div with onclick attribute</a></li>
<li><a href="./bubbling/div-onclick-ancestor.html">event bubbling - div with onclick attribute on ancestor</a></li>
<li><a href="./bubbling/div-addeventlistener-target.html">event bubbling - div with addEventListener("click"...)</a></li>
<li><a href="./bubbling/div-addeventlistener-ancestor.html">event bubbling - div with addEventListener("click"...) on ancestor</a></li>
<li><a href="./bubbling/div-cursorpointer-target.html">event bubbling - div with cursor:pointer</a></li>
<li><a href="./bubbling/div-cursorpointer-ancestor.html">event bubbling - div with cursor:pointer on ancestor</a></li>
</ul>
<ul>
<li><a href="./tests/pointer-multitouch-detect.html">pointer/multitouch detect</a></li>
<li><a href="./tests/pointercapture.html">Pointer Events <code>setPointerCapture</code></a></li>
</ul>
<h2>Demos</h2>
<ul>
<li><a href="./fastclick/">Tap delay example - Bootstrap navigation and 300ms delay</a></li>
<li><a href="./fastclick/fastclick.html">Tap delay example - Bootstrap with fastclick.js</a></li>
<li><a href="./css-dropdown/mouse-only.html">CSS dropdown</a></li>
<li><a href="./css-dropdown/mouse-keyboard.html">CSS dropdown with JS keyboard support</a></li>
<li><a href="./css-dropdown/mouse-keyboard-touch.html">CSS dropdown with JS keyboard and touch support</a></li>
<li><a href="./css-dropdown/mouse-only-aria-haspopup.html">CSS dropdown with aria-haspopup for IE10</a></li>
<li><a href="./particle/2/">particle party - mouse only</a></li>
<li><a href="./particle/2a/">particle party - mouse only, but with touch-action:none</a></li>
<li><a href="./particle/3/">particle party - mouse and touch</a></li>
<li><a href="./particle/3a/">particle party - mouse, touch and touch-action:none</a></li>
<li><a href="./particle/4/">particle field - mouse only</a></li>
<li><a href="./particle/4a/">particle field with touch</a></li>
<li><a href="./particle/4b/">particle field with touch-action:none</a></li>
<li><a href="./particle/4c/">particle field with pointermove</a></li>
<li><a href="./particle/4d/">particle field with pointermove and touch-action:none</a></li>
<li><a href="./particle/4e/">particle field with pointermove, touch-action:none and isPrimary check</a></li>
<li><a href="./swipe/">swipe gesture (from basic principles)</a></li>
<li><a href="./hammer/swipe/">swipe gesture (using Hammer.js)</a></li>
<li><a href="./picture-slider/">picture slider</a></li>
<li><a href="./touch-limit/">touch limit</a></li>
<li><a href="./tracker/mouse-tracker.html">tracker - mouse only</a></li>
<li><a href="./tracker/mouse-tracker_touch-action-none.html">tracker - mouse only, but with touch-action:none</a></li>
<li><a href="./tracker/multi-touch-tracker.html">tracker - multi-touch enabled</a></li>
<li><a href="./tracker/multi-touch-tracker-pointer.html">tracker - multi-touch and pointer enabled</a></li>
<li><a href="./tracker/multi-touch-tracker-gesture-preventdefault.html">tracker - multi-touch enabled, attempts to preventDefault on gesture for iOS/iPad</a> (spoiler: doesn't work)</li>
<li><a href="./handjs/listener/event-listener.html">event listener with HandJS</a></li>
<li><a href="./handjs/tracker/tracker-just-pointer.html">tracker - pointer events only</a></li>
<li><a href="./handjs/tracker/tracker-just-pointer-handjs.html">tracker - pointer events only but with HandJS</a></li>
<li><a href="./ie-touch/listener/event-listener.html">event listener with ie-touch</a></li>
<li><a href="./leapmotion/tracker/">tracker - LeapMotion (just for fun)</a></li>
<li><a href="./iosgestures/">iOS gestures</a></li>
<li><a href="./iosgestures/image.html">iOS gestures applied</a></li>
<li><a href="./pinch-zoom-rotate/">pinch/rotate gestures</a></li>
<li><a href="./picture-organiser/">picture organiser</a></li>
<li><a href="./ie-touch-fixed/">IE Touch test fixed using <code>setPointerCapture</code></a></li>
</ul>
<h2>Elsewhere...</h2>
<ul>
<li><a href="https://www.splintered.co.uk/experiments/archives/paranoid_0.5/">Paranoid 0.5</a></li>
<li><a href="http://codepen.io/patrickhlauke/pen/dzLcn">3D jQuery rotator (pointer events enabled)</a> (original: <a href="http://codepen.io/CreativePunch/pen/sucHI">3D Rotator by Creative Punch</a> / <a href="http://creative-punch.net/2014/03/3d-rotator-using-jquery/">article</a>)</li>
</ul>
</body>
</html>