| 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 |