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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
js实现随机点名功能
Dec 23 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
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
编辑求职信样本
2013/12/16 职场文书
我爱读书演讲稿
2014/05/07 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
户外拓展训练感想
2015/08/07 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL