js获得鼠标的坐标值的方法

 更新时间:2013年03月13日 14:28:13   作者:  
js获得鼠标的坐标值的方法,需要的朋友可以参考一下

复制代码 代码如下:

var x , y;
 

//当需求为获得的坐标值相对于body时,用:

function positionBody(event){

    event = event||window.event;

    //获得相对于body定位的横标值;

    x=event.clientX

    //获得相对于body定位的纵标值;

    y=event.clientY

}

//当需求为获得的坐标值相对于某一对象时,用:

function positionObj(event,id){

    //获得对象相对于页面的横坐标值;id为对象的id

    var thisX = document.getElementById(id).offsetLeft;

    //获得对象相对于页面的横坐标值;

    var thisY = document.getElementById(id).offsetTop;

    //获得页面滚动的距离;

    //注:document.documentElement.scrollTop为支持非谷歌内核;document.body.scrollTop为谷歌内核

    var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;

    event = event||window.event;

    //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值;

    x = event.clientX - thisX;

    //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度;

    y = event.clientY - thisY + thisScrollTop;

}

相关文章

  • js保留小数点后几位的写法

    js保留小数点后几位的写法

    本篇文章主要是对js保留小数点后几位的写法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 67 个节约开发时间的前端开发者的工具、库和资源

    67 个节约开发时间的前端开发者的工具、库和资源

    在本文中,我不会去谈 React、Angular、Vue 等等这些大的前端框架,也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器,我只是想简单的分享一套我认为有助于提升开发者工作流的工具集
    2017-09-09
  • php析构函数的具体用法小结

    php析构函数的具体用法小结

    本篇文章主要是对php析构函数的具体用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • js 动态给元素添加、移除事件的实现方法

    js 动态给元素添加、移除事件的实现方法

    下面小编就为大家带来一篇js 动态给元素添加、移除事件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS判断字符串是否为整数的方法--简单的正则判断

    JS判断字符串是否为整数的方法--简单的正则判断

    今天小编就为大家分享一篇JS判断字符串是否为整数的方法--简单的正则判断,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • webpack打包优化的几个方法总结

    webpack打包优化的几个方法总结

    这篇文章主要介绍了webpack打包优化的几个方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 使用js获取伪元素的content实例

    使用js获取伪元素的content实例

    下面小编就为大家带来一篇使用js获取伪元素的content实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • javascript 人物逼真行走,已完成

    javascript 人物逼真行走,已完成

    然后请分析下程序,我出以下题目,供牛牛们练手(RPG游戏开发 - 实战,不搞理论,着重程序实现思路).
    2009-04-04
  • JavaScript反射与依赖注入实例详解

    JavaScript反射与依赖注入实例详解

    这篇文章主要介绍了JavaScript反射与依赖注入,结合实例形式较为详细的分析了JavaScript反射与依赖注入的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-05-05
  • js中合并对象的几种实现方法

    js中合并对象的几种实现方法

    "js 合并对象"是一种在JavaScript编程中常见的操作,用于将多个对象的属性合并到一起,通常,我们会使用ES6的扩展运算符或者Object.assign()函数来实现这个功能,感兴趣的可以了解一下
    2023-08-08

最新评论