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 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
javascript制作2048游戏
Mar 30 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
非常好用的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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
浅谈js中的bind
2019/03/18 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python fabric实现远程部署
2017/01/05 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
出国导师推荐信
2014/01/16 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
MySQL数据库表约束讲解
2022/06/21 MySQL