时间戳

首页 > 解决方案 > 从覆盖 div 获取鼠标事件（点击）

javascript - 从覆盖 div 获取鼠标事件（点击）

问题描述

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

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

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

注意：srciframe 的域与窗口不同。

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

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/

标签： javascript

解决方案

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

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

如果不这样做，许多网站将很容易受到 XSS 的攻击。

推荐阅读