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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
javascript cookies操作集合
Apr 12 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
详解javascript函数写法大全
Mar 25 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
vue.js 实现a标签href里添加参数
Nov 12 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 SQL防注入代码集合
2008/04/25 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
使用js画图之饼图
2015/01/12 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python Flask基础教程示例代码
2018/02/07 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python实现飞机大战项目
2020/03/11 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
Java基础类库面试题
2013/09/04 面试题
精彩的大学生自我评价
2013/11/17 职场文书
元旦晚会策划方案
2014/02/18 职场文书
教师求职简历自我评价
2015/03/10 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python