从覆盖分区获取鼠标事件(单击)

Question

我有下面的代码，其中有一个位于iframe上的不可见div。我想获取在iframe上执行的所有鼠标事件(现在让我们只听click(。但是，如果我将pointer-events设置为none，则不会调用click侦听器。

我也尝试过实现这一点，但没有成功：将点击事件添加到iframe

我的目标是监听iframe中发生的任何事件，并在主窗口中弹出一条消息："iframe发生了一些事件"。我不想知道更多关于iframe中事件的信息，只想知道它们是否被触发。

注意：iframe的src是与窗口不同的域。

如果可能的话，有什么想法吗？

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

#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;
pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>

这是http://jsfiddle.net/cxbmu/348/

Answer 1

var frame = $('#frame').contents();只有在相同域或CORS 时才可能

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

如果没有这一点，许多网站将非常容易受到XSS的攻击。

Answer 2

您必须从css:中删除指针事件：none

<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');
});
})