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 处理表单元素的代码
Feb 15 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
javascript的push使用指南
2014/12/05 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
Angular实现form自动布局
2016/01/28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
前台领班岗位职责
2013/12/04 职场文书
运动会邀请函范文
2014/02/06 职场文书
理财投资建议书
2014/03/12 职场文书
政府法律服务方案
2014/06/14 职场文书
高一军训的心得体会
2014/09/01 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
宿舍管理制度范本
2015/08/07 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript