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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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产生随机字符串函数
2006/12/06 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
django中send_mail功能实现详解
2018/02/06 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python pandas库的安装和创建
2019/01/10 Python
实例介绍Python中整型
2019/02/11 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python numpy库np.percentile用法说明
2020/06/08 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
刘胡兰的英雄事迹材料
2014/02/11 职场文书
社区食品安全实施方案
2014/03/28 职场文书
大学学习计划书范文
2014/05/02 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL