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 if (event.type === "mousemove") |
| 56 document.body.style.backgroundColor = "#" + Math.floor(Math.random() * (
1 << 24)).toString(16); |
| 57 requestAnimationFrame(onEventAfterFrame); |
| 58 } |
| 59 |
| 60 function onEventAfterFrame() |
| 61 { |
| 62 for (event of inflightEvents) { |
| 63 var type = event.type; |
| 64 var listener = pendingListeners[type]; |
| 65 if (!listener) { |
| 66 pendingEvents[type] = (pendingEvents[type] || 0) + 1; |
| 67 continue; |
| 68 } |
| 69 delete pendingListeners[type]; |
| 70 listener(); |
| 71 } |
| 72 inflightEvents = null; |
| 73 } |
| 74 |
| 75 function waitForEvent(eventType, callback) |
| 76 { |
| 77 if (pendingEvents[eventType]) { |
| 78 pendingEvents[eventType]--; |
| 79 callback(); |
| 80 return; |
| 81 } |
| 82 pendingListeners[eventType] = callback; |
| 83 } |
| 84 |
| 85 var eventTypes = [ |
| 86 "mousemove", |
| 87 "mousedown", |
| 88 "mouseup", |
| 89 "wheel", |
| 90 "gesturetap", |
| 91 "click", |
| 92 "keydown", |
| 93 "keyup", |
| 94 "touchstart", |
| 95 "touchend", |
| 96 "touchcancel", |
| 97 "touchmove" |
| 98 ]; |
| 99 |
| 100 for (var e of eventTypes) { |
| 101 window.addEventListener(e, onEvent, true); |
| 102 } |
| 103 </script> |
| 104 </body> |
| 105 </html> |
OLD | NEW |