Question

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

我也尝试实施此方法，但没有成功：Add click event to 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

pointer-events: none阻止了诸如click，hover，mouseenter之类的交互事件，因此click事件将永远不会被调用。

pointer-events: none：

该元素绝不是鼠标事件的目标；但是，如果鼠标后代的指针事件设置为其他值，则鼠标事件可能以其后代元素为目标。在这种情况下，鼠标事件将在事件捕获/冒泡阶段在到达/离开后代的适当方式触发此父元素上的事件侦听器。

请参见documentation。

Answer 2

var frame = $('#frame').contents();仅在相同域或CORS

中才有可能

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

如果不这样做，很多站点将很容易受到XSS的攻击。</ p>

Answer 3

您必须删除指针事件：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');
  });
})

从叠加层div获取鼠标事件（点击）

3 个答案: