跟踪网页的点击坐标，包括iframe

Question

我正在使用以下方法为网站创建基本的热图：

$(document).ready(function() { 

   $(document).on('mousedown', function(evt) {
      console.log('X: '+ evt.pageX);
      console.log('Y: '+ evt.pageY);
      $.post('clickmap.php', {
          x:evt.pageX,
          y:evt.pageY        
       });
   });
});'

小提琴： http : //jsfiddle.net/8jjo7q5y/

除了还包含iframe上的点击的点击坐标时，效果很好。 似乎在使用CrazyEgg时这是可能的，并且我已经通过单击Google广告（位于iframe中）亲自测试了CrazyEgg，并且热图数据已正确返回给CrazyEgg。

关于如何完成对包含iframe的点击跟踪的所有想法。

Answer 1

HTML：

<div></div>
<iframe src="http://www.jsfiddle.net"></iframe>

CSS：

 div {
    position: absolute;
    width: 300px;
    height: 150px;
    z-index: 2;
  }

 iframe {
    position: absolute;
    width: 300px;
    height: 150px;
    z-index: 1;
 }

JavaScript的：

    $(window).click(function(e) {
          console.log("x:" + e.pageX + ", y:" + e.pageY);
    });

FIDDLE http://jsfiddle.net/a9owgqrv/

Answer 2

如果iframe内容根本不需要任何用户交互（单击，滚动等），则可以在其顶部放置一个 透明的 div ，以捕获鼠标的点击。 否则，我认为您不走运。

（感谢@Andranik表示div实际上不需要透明（不透明）样式。）

Answer 3

对于不使用代理或将div放在iframe上导致无法点击iframe的指向不同域的iframe的简短答案：否

尽管如此，这里还是有一些血腥的尝试

它使用了在窗口“外部”（例如在iframe内部）单击时触发的模糊事件，我添加了mousemove事件以使用户单击iframe时具有坐标，但这仅工作一次，要再次工作，用户必须在iframe外部单击并再次进入内部，但总比没有好;-)

$(document).ready(function() { 
    var mouse = {x: 0, y: 0};
    document.addEventListener('mousemove', function(e){ 
        mouse.x = e.clientX || e.pageX; 
        mouse.y = e.clientY || e.pageY 
    }, false);
    $(window).blur( function(e){
        console.log("clicked on iframe")
      console.log('X: '+ mouse.x);
      console.log('Y: '+ mouse.y);
});
   $(document).on('mousedown', function(evt) {
      console.log('X: '+ evt.pageX);
      console.log('Y: '+ evt.pageY);
      //$.post('clickmap.php', {
          //x:evt.pageX,
          //y:evt.pageY        
       //});
   });
});

http://jsfiddle.net/8jjo7q5y/1/