WordPress.org

Make WordPress Core

Ticket #22595: mobile-events-test.html

File mobile-events-test.html, 2.4 KB (added by azaozz, 7 months ago)
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>Mobile events test</title>
6<style type="text/css">
7body,
8button,
9textarea {
10        font-size: 16px;
11        line-height: 1.6em;
12}
13
14p:first-child {
15        margin-top: 30px;
16}
17
18#button {
19        font-size: 20px;
20        padding: 5px 12px;
21}
22
23button,
24#prevent {
25        vertical-align: text-bottom;
26}
27
28#output {
29        max-width: 400px;
30        height: 250px;
31        overflow: auto;
32        padding-left: 6px;
33        border: 1px solid #ddd;
34}
35
36#events {
37        width: 200px;
38        height: 200px;
39}
40
41#stage-2 {
42        display: none;
43}
44</style>
45</head>
46<body>
47<form>
48<div id="stage-1">
49<p><textarea id="events" spellcheck="false">
50touchstart
51touchend
52mousedown
53mouseup
54click
55mouseenter
56mouseleave
57mouseover
58mouseout
59focus
60blur
61</textarea></p>
62<p><button type="button" id="bind">Bind</button></p>
63</div>
64
65<div id="stage-2">
66<p><button type="button" id="button">Click me!</button> Prevent deafult on event #
67<select id="prevent">
68<option>-</option>
69<option>1</option>
70<option>2</option>
71<option>3</option>
72<option>4</option>
73<option>5</option>
74<option>6</option>
75<option>7</option>
76<option>8</option>
77<option>9</option>
78<option>10</option>
79<option>11</option>
80<option>12</option>
81</select>
82</p>
83<p><div id="output"></div></p>
84<p><button type="button" id="clear">Clear</button></p>
85</div>
86</form>
87
88<script type="text/javascript">
89(function(){
90        var button = document.getElementById('button'),
91                output = document.getElementById('output'),
92                prevent = document.getElementById('prevent'),
93                func, bind, id, n = 0, to = false;
94
95        id = function(id) {
96                return document.getElementById(id);
97        }
98       
99        func = function(e) {
100                var out = e.type;
101
102                if ( !to )
103                        setTimeout(function(){
104                                n = 0;
105                                to = false;
106                                output.innerHTML += '------------------------<br>';
107                                output.lastChild.scrollIntoView(false);
108                        }, 750);
109
110                to = true;
111                n++;
112
113                if ( n == prevent.value ) {
114                        e.preventDefault();
115                        out += ' (prevented)';
116                }
117
118                output.innerHTML += out + '<br>';
119                output.lastChild.scrollIntoView(false);
120        }
121
122        bind = function() {
123                var i, events = id('events').innerHTML.replace(/[^a-z\n]+/g, '');
124                events = events.split(/\n/);
125               
126                if ( events.length ) {
127                        for ( i in events ) {
128                                button.addEventListener(events[i], func, false);
129                        }
130                }
131        }
132
133        id('clear').addEventListener('click', function(){ output.innerHTML = ''; }, false);
134        id('bind').addEventListener('click', function(){
135                bind();
136                id('stage-1').style.display = 'none';
137                id('stage-2').style.display = 'block';
138        }, false);
139})();
140</script>
141</body>
142</html>