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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 UTF8编码内的繁简转换类
2009/07/20 PHP
php 读取文件乱码问题
2010/02/20 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
简历自荐信
2013/12/02 职场文书
会计出纳岗位职责
2013/12/25 职场文书
党校学习自我鉴定
2014/02/24 职场文书
投标诚信承诺书
2014/05/26 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
年度考核个人总结
2015/03/06 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
在js中修改html body的样式
2021/11/11 Javascript