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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
javascript几个易错点记录
Nov 26 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
详解小程序云开发数据库
May 20 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
微信小程序实现轮播图指示器
Jun 25 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加密解密函数(动态加密)
2013/06/19 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python爬虫之遍历单个域名
2019/11/20 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
诚信承诺书模板
2014/05/26 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
关于军训的感想
2015/08/07 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技