<!DOCTYPE html>
<html>
<body>
    <div id="clickable_div_in_subframe">beautiful brown eyes</div>
</body>
<head>
    <script>
        function debug(s) {
            top.document.querySelector("#console").innerText += s + "\n";
        }

        function logEvent(e) {
            debug(e.target.id + " got " + event.type + " at " + event.x + "," + event.y);
        }

        window.onload = function() {
            var clickable_div_in_subframe = document.querySelector("#clickable_div_in_subframe");

            clickable_div_in_subframe.onmousemove = function(event) {
                logEvent(event);
            };

            clickable_div_in_subframe.onmouseover= function(event) {
                logEvent(event);
            };

            clickable_div_in_subframe.onclick = function(event) {
                logEvent(event);

                var overlapping_div_in_main_frame = top.document.querySelector("#overlapping_div_in_main_frame");

                // Give overlapping_div_in_main_frame a renderer. It should now be right under the cursor.
                overlapping_div_in_main_frame.style.display = "block";

                // Force clickable_div_in_subframe to lose its renderer.
                this.style.display = "none";
                this.clientHeight;

                // Force clickable_div_in_subframe to gain a new renderer.
                this.style.display = "block";
                this.clientHeight;
            };
        };
    </script>
</head>
</html>