从overlay div获取鼠标事件(单击)

pointer-events: none 正在阻止单击、悬停、鼠标指针等交互事件,因此不会调用单击事件。

指针事件:无 :

元素永远不是鼠标事件的目标;但是,如果这些子体的指针事件设置为其他值,则鼠标事件可能会以其子体元素为目标。在这些情况下,在事件捕获/气泡阶段,鼠标事件将酌情触发此父元素上的事件侦听器,以便它们往返于子元素。

见 documentation .

var frame = $('#frame').contents(); 只有在同一域或 CORS

frame.find('body').click(function(event){
   console.log('yaay');
});

如果不是这样的话,很多网站都很容易受到XSS的攻击。

必须从css中删除指针事件:无:

<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>

#frame {
  z-index: 1;
  width: 600px;
  height: 400px;
  position: absolute;
  pointer-events: all;
}

#overlay {
  width: 605px;
  height: 405px;
  opacity: 0;
  background: red;
  z-index: 9999;
  position: absolute;
}

$(document).ready(function(){
  $('#overlay').on('click', function(e) {
    alert('test');
  });
})