Javascript 跟踪页面的单击坐标，包括iFrame

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

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

小提琴：

除了在iframe上包含单击的单击坐标外，它还非常有用。它和我通过点击谷歌广告（放在iframe内）亲自测试了CrazyEgg，热图数据正确返回到CrazyEgg

---

关于如何完成包含iframe的整个页面正文的点击跟踪的任何想法。

如果

iframe

内容根本不需要任何用户交互（点击、滚动等），您可以在其上方放置一个透明的

div

，以捕获鼠标点击。否则，我认为你就不走运了

---

（感谢@Andranik显示

div

实际上不需要透明（不透明）样式。）

针对指向不同域的iframe的简短回答，无需使用代理或在iframe上放置div，从而导致无法单击iframe：否

然而，这里有一些血腥的企图

它使用了在窗口“外部”单击时触发的模糊事件，例如在iframe内部，我添加了mousemove事件以获得用户单击iframe的坐标，但这只起作用一次，要再次工作，用户必须在iframe外部和内部单击，但总比没有好；-）

HTML：

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

JavaScript:

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

---

FIDDLE

如果iframe具有从其他域加载的页面，则此操作可能不起作用。在jsFiddle示例中，您正在从

jsFiddle.jshell.net

从

jsFiddle.net

加载一个页面。理论上，这意味着CrazyEgg将无法将自己连接到iframe，我不知道它是否是这样跟踪点击的。

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

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

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