`
onedear
  • 浏览: 68927 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js获取精确的鼠标坐标

阅读更多

 

现在很多网站分析系统均要获取鼠标坐标跟轨迹来绘制云图跟鼠标轨迹,这就 要求鼠标坐标必须要准确才行。但要准确却有一定困难。

如上图:

用户打开百度首页,在不同的浏览器大小下点击“网站”字体,的坐标完全不一致。坐标不准确,云图,热点图何来准确?

对于普通一个网站有3个不确定性:

1.       是否固定宽度

2.       是否靠左,靠右,居中

3.       是否自适应大小

 

这3个不确定性由于无法通过js获取,所以必须通过网站告知js此三个参数具体值。

目标:不管浏览器窗口大小如何,对应鼠标的点击坐标均与浏览器最大化时对应的坐标值完全一致。

 

坐标偏移一般不考虑Y轴坐标,所以代码只针对于X轴的考虑

<script language="javascript" type="text/javascript">
 var width =800;  //固定宽度
 var align "center"; //靠左,居中,靠右
 var auto =false;  //自适应大小
 
  
 function getMousePoint(event) {
         var px, py;
         var bodyWidth  =getDocWidth();
         var screenHeight =window.screen.height;           //屏幕分辨率的高
         var screenWidth =window.screen.width;            //屏幕分辨率的宽
         
         
        //ie的兼容性,为了用于onmousemove事件
        if(!event) {
            event = window.event;
        }
        if(document.all) { // is ie
            px = event.clientX;
            py = event.clientY;
            px += document.documentElement.scrollLeft;
            py += document.documentElement.scrollTop;
        } else {
            px = event.pageX;
            py = event.pageY;
        }
        var maxScreenX = 0 ;
        var nowScreenX = 0 ;
        if(align == "right") {
            nowScreenX = bodyWidth - width ;
            maxScreenX = screenWidth - width ;
        }
        else if(align == "left") {
            nowScreenX = 0 ;
            maxScreenX = 0 ;
        }
        else { //default : center
            nowScreenX = (bodyWidth - width)/2 ;
            maxScreenX = (screenWidth - width) /2 ;
        }
        //必须非自适应
        if(!auto && maxScreenX != nowScreenX){
            px = px - Math.abs(nowScreenX) + maxScreenX;
        }
        alert(px+"___" + py);
        return { x: px, y: py };
    }
  
  
 function getDocWidth(){return(document.documentElement
   &&document.documentElement.scrollWidth)
   ||(document.body&&document.body.scrollWidth)||0}
//测试代码,纯粹用于测试
document.body.onclick = function(event) {
     
    var pos = getMousePoint(event);
    var xPos = pos.x;
    var yPos = pos.y;
 }</script>

 稍微优化后实际上只要2个参数即可。

如width=0的时候,就说明自适应?呵

 

对于自适应大小的网站(如用table标签,width=100%)这种,没必要做换算,因为无法获取精确值

此鼠标获取的方法适用于主流网站系统,如163,qq,cntv,sina,baidu,不去考虑其他界面设计得很别扭网站

将上述代码直接复制到html的</body>之前即可看效果

0
1
分享到:
评论

相关推荐

    网页实现全屏获取鼠标坐标

    标题"网页实现全屏获取鼠标坐标"提示我们关注的核心是实现一个功能,使得无论浏览器窗口大小如何,都能获取到鼠标的全局坐标,包括在窗体外的坐标。 描述中提到"自己制作控件实现网页获取窗体外鼠标坐标",这可能是...

    任意获取鼠标点击处的位置坐标

    获取鼠标的坐标,通过js任意获取鼠标点击处的位置坐标。

    javascript获取当前鼠标坐标的方法

    本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解。具体代码如下: 代码如下:&lt;html&gt; &lt...

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...

    javascript获取鼠标当前位置坐标并显示

    ### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标,并实时显示这些坐标值。该功能主要涉及到以下几个知识点: 1. **事件监听器...

    JQuery获取鼠标坐标

    本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标,包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作,提供了强大的选择器和事件处理...

    火狐兼容获取鼠标的坐标

    在Web开发中,特别是在JavaScript编程中,获取鼠标坐标是一项常见的需求,用于实现各种交互效果,如拖放功能、点击位置分析等。在不同的浏览器中,实现这一功能的方法可能有所不同,因此需要进行兼容性处理。以下是...

    pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_

    `pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_`这个项目就是针对这一需求而设计的,它利用了PDF.js库来实现PDF文档的关键字坐标获取功能。 PDF.js是Mozilla开发的一个开源JavaScript库,用于在Web浏览器...

    javascriptjs获取鼠标点击时的坐标位置

    javascriptjs获取鼠标点击时的坐标位置 只想帮你度过这个问题 加油你也行的

    wincc获取鼠标位置.7z

    首先,实现这一功能需要了解WinCC的脚本编程,它支持VBScript或JavaScript,这两种脚本语言都可以用来获取鼠标的坐标。在WinCC中,可以通过创建一个事件,比如“鼠标点击”事件,然后在该事件的脚本中编写获取鼠标...

    显示鼠标坐标信息.rar

    JavaScript代码可能使用`event.clientX`和`event.clientY`来获取鼠标的X和Y坐标,这两个属性分别返回鼠标相对于当前视口左上角的水平和垂直距离。 在实际应用中,这样的功能可以用于创建交互式的地图、画布应用,...

    鼠标坐标跟踪限时运行

    总之,“鼠标坐标跟踪限时运行”是IT领域中一项实用的技术,它结合了实时数据获取、时间限制以及用户行为分析,广泛应用于各种场景。理解和掌握这项技术,有助于提升软件开发和用户体验设计的能力。

    javascript获得鼠标的坐标值

    在JavaScript中,获取鼠标的坐标值是一项常见的任务,它在用户交互和动态界面设计中扮演着重要角色。根据描述,我们将讨论两种不同的场景来获取这些坐标:一是相对于`body`元素,二是相对于某个特定的对象。 ### 1....

    ArcGIS API For JavaScript 4.x 获取地图经纬度坐标(附完整代码)

    ArcGIS API For JavaScript 4.x 获取地图经纬度坐标(附完整代码,即开即用)

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...

    Three.js获取鼠标点击的三维坐标示例代码

    总结来说,Three.js获取鼠标点击的三维坐标涉及的关键步骤包括:屏幕坐标到NDC坐标的转换、逆向投影、射线投射以及物体交点检测。这个过程对于实现3D场景中的交互操作,如选择、拖动或点击事件响应,都是必不可少的...

    获取电脑屏幕上鼠标指针的位置坐标

    在Python中,可以使用pygetwindow库来获取鼠标坐标: ```python from pygetwindow import getCursor print(getCursor()) ``` 在JavaScript中,可以利用`event.clientX`和`event.clientY`属性来获取鼠标位置,但这...

    跟随鼠标移动十字坐标显示,炫酷

    3. **坐标计算**:当`mousemove`事件触发时,我们可以从事件对象中获取鼠标的页面坐标(`event.clientX`和`event.clientY`)。接着,我们需要根据这些坐标更新十字架元素的CSS位置属性(如`left`和`top`),使其始终...

    获取图像中鼠标的坐标值

    5. **JavaScript**: 在Web开发中,你可以使用`event.clientX`和`event.clientY`属性来获取鼠标在HTML元素上的相对坐标。如果需要屏幕坐标,可以使用`window.pageXOffset`和`window.pageYOffset`调整。 6. **Qt**: ...

    js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    总结以上步骤,使用JavaScript获取鼠标坐标的基本原理是通过监听鼠标事件,然后利用事件对象中提供的属性来计算坐标位置。此外,代码中还展示了如何在HTML文档中使用JavaScript代码,如何使用`addEventListener`来...

Global site tag (gtag.js) - Google Analytics