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

Track click coordinates of a page, including iframes

本文关键字：坐标 包括 iframe 跟踪      更新时间：2023-09-26

我正在为一个网站创建一个基本的热图，使用如下:

$(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。

关于如何完成点击跟踪的整个页面正文与iframes包括。

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

小提琴 http://jsfiddle.net/a9owgqrv/

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

(感谢@Andranik显示div实际上不需要透明(不透明度)样式)

对于iframe指向不同的域而不使用代理或在iframe上放置div导致无法点击iframe的简短回答:no

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

它使用模糊事件，当点击窗口的"外部"，例如在iframe内，我添加了鼠标移动事件有坐标，用户点击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/

相关文章：