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 实现的全选和反选
Apr 15 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php中fsockopen用法实例
2015/01/05 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python实现最小二乘法线性拟合
2019/07/19 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
和解协议书
2014/04/16 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
领导新年致辞2016
2015/07/29 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript