JS获取鼠标坐标的实例方法


Posted in Javascript onJuly 18, 2013
var restrictX;  
var restrictY;  
var tip;  
// 鼠标坐标   
function mousePosition(ev) {  
return {  
        x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,  
        y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop  
    };  
}  
// 鼠标事件   
function mouseMove(ev) {  
    ev = ev || window.event;  
    var mousePos = mousePosition(ev);  
    restrictX = mousePos.x;  
    restrictY = mousePos.y;  
}  
document.onmousemove = mouseMove;  
document.onclick = mouseMove; 

上面的代码在谷歌和搜狐浏览器中获取的值会不准确,需进行修改,如下:
var restrictX;  
var restrictY;  
var tip;  
// 鼠标坐标   
function mousePosition(ev){  
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;  
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    return {  
        x:ev.clientX + scrollLeft - document.documentElement.clientLeft,  
        y:ev.clientY + scrollTop - document.documentElement.clientTop  
    };  
}  
// 鼠标事件   
function mouseMove(ev){  
    ev = ev || window.event;  
    var mousePos = mousePosition(ev);  
    restrictX = mousePos.x;  
    restrictY = mousePos.y;  
}  
document.onmousemove = mouseMove;  
document.onclick = mouseMove; 

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

这两句为,如果能获取到鼠标坐标,则去前面,否则用后面的方法获取鼠标坐标,“|| ”后面的是给WebKit 内核的浏览器使用
Javascript 相关文章推荐
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
Vue的Options用法说明
Aug 14 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 #Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 #Javascript
JS随机生成不重复数据的实例方法
Jul 17 #Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 #Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 #Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 #Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 #Javascript
You might like
编译问题
2006/10/09 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
实现vuex原理的示例
2020/10/21 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
党员一句话承诺大全
2014/03/28 职场文书
项目转让协议书
2014/10/27 职场文书
骨干教师考核评语
2014/12/31 职场文书
八月迷情观后感
2015/06/11 职场文书