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 变量作用域 代码分析
Jun 26 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
教大家制作简单的php日历
2015/11/17 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP实现图片压缩
2020/09/09 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
python tkinter窗口最大化的实现
2019/07/15 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
兼职学生的自我评价
2013/11/24 职场文书
党员作风建设自查报告
2014/10/23 职场文书
满月酒邀请函
2015/01/30 职场文书
交通安全月活动总结
2015/05/08 职场文书
同学聚会感言一句话
2015/07/30 职场文书
四年级语文教学反思
2016/03/03 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js