file_mouse_enterleave.html (1071B)
1 <html> 2 <body> 3 <style> 4 #target { 5 width: 100%; 6 height: 100%; 7 } 8 #reflow { 9 width: 100%; 10 height: 10px; 11 background-color: red; 12 } 13 </style> 14 <div id="target"></div> 15 <div id="reflow"></div> 16 <script> 17 function listener(e) { 18 parent.postMessage({ eventType: e.type, targetName: e.target.localName }, "*"); 19 } 20 21 window.addEventListener("message", function(aEvent) { 22 if (aEvent.data === "reflow") { 23 let reflow = document.getElementById("reflow"); 24 reflow.style.display = "none"; 25 reflow.getBoundingClientRect(); 26 reflow.style.display = "block"; 27 reflow.getBoundingClientRect(); 28 29 // Now wait a bit to see if there is any unexpected events fired. 30 requestAnimationFrame( 31 () => parent.postMessage({ eventType: "reflowed" }, "*") 32 ); 33 } 34 }); 35 36 let target = document.getElementById("target"); 37 target.addEventListener("mouseenter", listener); 38 target.addEventListener("mouseleave", listener); 39 40 let root = document.documentElement; 41 root.addEventListener("mouseenter", listener); 42 root.addEventListener("mouseleave", listener); 43 </script> 44 </body> 45 </html>