OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 #test-hover { | |
5 position: absolute; | |
6 left: 20px; | |
7 top: 40px; | |
8 width: 100px; | |
9 height: 30px; | |
10 background-color: red; | |
11 } | |
12 | |
13 #test-hover:hover { | |
14 background-color: blue; | |
15 } | |
16 | |
17 #test-button { | |
18 position: absolute; | |
19 left: 20px; | |
20 top: 100px; | |
21 width: 100px; | |
22 height: 30px; | |
23 } | |
24 | |
25 #scrollable { | |
26 position: absolute; | |
27 left: 200px; | |
28 top: 30px; | |
29 width: 200px; | |
30 height: 200px; | |
31 overflow: scroll; | |
32 } | |
33 | |
34 #scrolled { | |
35 width: 800px; | |
36 height: 800px; | |
37 } | |
38 </style> | |
39 </head> | |
40 <body> | |
41 <div id="test-hover">Hover me</div> | |
42 <button id="test-button">Click me</button> | |
43 <div id="scrollable"><div id="scrolled"></div></div> | |
44 <script> | |
45 var pendingListeners = {}; | |
46 var pendingEvents = {}; | |
47 var inflightEvents = null; | |
48 function onEvent(event) | |
49 { | |
50 if (inflightEvents) { | |
51 inflightEvents.push(event); | |
52 return; | |
53 } | |
54 inflightEvents = [event]; | |
55 requestAnimationFrame(onEventAfterFrame); | |
56 } | |
57 | |
58 function onEventAfterFrame() | |
59 { | |
60 for (event of inflightEvents) { | |
61 var type = event.type; | |
62 var listener = pendingListeners[type]; | |
63 if (!listener) { | |
64 pendingEvents[type] = (pendingEvents[type] || 0) + 1; | |
65 continue; | |
66 } | |
67 delete pendingListeners[type]; | |
68 listener(); | |
69 } | |
70 inflightEvents = null; | |
71 } | |
72 | |
73 function waitForEvent(eventType, callback) | |
74 { | |
75 if (pendingEvents[eventType]) { | |
76 pendingEvents[eventType]--; | |
77 callback(); | |
78 return; | |
79 } | |
80 pendingListeners[eventType] = callback; | |
81 } | |
82 | |
83 var eventTypes = [ | |
84 "mousemove", | |
85 "mousedown", | |
86 "mouseup", | |
87 "wheel", | |
88 "gesturetap", | |
89 "click", | |
90 "keydown", | |
91 "keyup", | |
92 "touchstart", | |
93 "touchend", | |
94 "touchcancel", | |
95 "touchmove" | |
96 ]; | |
97 | |
98 for (var e of eventTypes) { | |
99 window.addEventListener(e, onEvent, true); | |
100 } | |
101 </script> | |
102 </body> | |
103 </html> | |
OLD | NEW |