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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
javascript头像上传代码实例
Sep 28 Javascript
使用jQuery实现购物车
Oct 29 jQuery
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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 函数中使用static的说明
2012/06/01 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
JS 对象介绍
2010/01/20 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
python正则表达式的使用
2017/06/12 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
倡议书格式模板
2014/05/13 职场文书
主题班会演讲稿
2014/05/22 职场文书
社区灵活就业证明
2014/11/03 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
单位租房协议范本
2014/12/03 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL