JS获取鼠标坐标的实例方法
更新时间：2013年07月18日 16:50:13 作者：
这篇文章介绍了JS获取鼠标坐标的实例方法，有需要的朋友可以参考一下
复制代码 代码如下:
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基础篇（6）之函数表达式闭包的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JS中的模糊查询功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
JavaScript圆形虚幻效果，跟PS里面的羽化效果有点像，需要的朋友可以参考下。2011-12-12
这篇文章主要为大家详细介绍了小程序实现文字循环滚动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
文章主要是介绍了通过一个第三方类库RazorJS，实现Javascript 文件里使用 .Net MVC Razor 语法，很巧妙，推荐给大家2014-07-07
Javascript中有3个事件句柄在对应键盘的输入状态:按键被按下（按下按键但还没有抬起）、点击按键（按下并抬起按键）、按键抬起（按键抬起之后）,接下来详细介绍，感兴趣的朋友可以了解下2013-01-01
这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了js最全的数组的降维5种办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
13个简单的代码优化方法，可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速2012-07-07
这篇文章主要介绍了javascript实现的猜数小游戏,游戏中用户共有10次猜测机会,并且每次都有不同的提示信息,该游戏涉及javascript流程控制与数值运算的相关技巧,需要的朋友可以参考下2016-05-05
最新评论