JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selector">SELECTOR</div>
<iframe id="iframe" src="http://fiddle.jshell.net/x3a71jsv/2/show/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

CSS

#selector {
     position: absolute;
     top: 150px;
     left: 150px;
     width: 250px;
     height: 250px;
     -webkit-box-shadow: 0px 0px 0px 5px yellow;
     -moz-box-shadow: 0px 0px 0px 5px yellow;
     box-shadow: 0px 0px 0px 5px yellow;
 }
 #iframe {
     width: 500px;
     height: 500px;
     border: none;
 }

JavaScript

document.getElementById('iframe').contentDocument.addEventListener('click', function (event) {
         alert(event.target.id);
     }.bind(this));

     document.getElementById('selector').addEventListener('click', function (event) {
         var selector = document.getElementById('selector');
         selector.style.display = 'none';
         var item = document.getElementById('iframe').contentDocument.elementFromPoint(event.pageX, event.pageY);
         selector.style.display = '';
         alert(item.id);
     }.bind(this));