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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
jquery uaMatch源代码
Feb 14 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
老生常谈ES6中的类
Jul 31 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
js调用flash的效果代码
2008/04/26 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
js中this对象用法分析
2018/01/05 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
小程序自定义日历效果
2018/12/29 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
Python连接数据库学习之DB-API详解
2017/02/07 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
详细分析Python垃圾回收机制
2020/07/01 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
党校培训自我鉴定
2014/02/01 职场文书
12月红领巾广播稿
2014/02/13 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
如何解决php-fpm启动不了问题
2021/11/17 PHP