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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
Javascript中的变量使用说明
May 18 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
详解jQuery事件
Jan 13 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
了解javascript中的Dom操作
May 27 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 Ajax乱码
2008/04/09 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue实现弹幕功能
2019/10/25 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python使用folium excel绘制point
2019/01/03 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
对Django外键关系的描述
2019/07/26 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Pycharm调试程序技巧小结
2020/08/08 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
致长跑运动员广播稿
2014/01/31 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
2016党员入党决心书
2015/09/22 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
配置nginx负载均衡
2022/05/06 Servers
vue使用element-ui按需引入
2022/05/20 Vue.js