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 相关文章推荐
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
React事件处理的机制及原理
Dec 03 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
js回到页面指定位置的三种方式
Dec 17 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面向对象之多态
2014/08/20 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JQuery样式与属性设置方法分析
2019/12/07 jQuery
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
原生js实现购物车功能
2020/09/23 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python实现顺序表的简单代码
2018/09/28 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python模块future用法原理详解
2020/01/20 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
总经理秘书工作职责
2013/12/26 职场文书
嘉宾邀请函
2015/01/31 职场文书
市场部经理岗位职责
2015/02/02 职场文书
北大自主招生自荐信
2015/03/04 职场文书
工作会议简报
2015/07/20 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis