通过JS 获取Mouse Position(鼠标坐标)的代码


Posted in Javascript onSeptember 21, 2009

昨天写的脚本在获取鼠标位置的时候有些问题。在IE中始终当有滚动条的时候,发现document.body.scrollTop并没有起到作用。
后来在google中搜索到一篇文章Mouse Cursor Position,详细介绍了浏览器鼠标定位的问题。各个浏览器对鼠标定位的标准不一样,就连不通版本的ie对定位支持都不一样。
document.body.scrollLeft,document.body.scrollTop只用于IE6以前的版本,在IE6中,对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE,那么IE6将使用document.documentElement.scrollLeft 来获取鼠标的绝对位置。

Stephen Chapman提供的函数做个记录

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
  
return evt.clientX + (document.documentElement.scrollLeft ?
  
document.documentElement.scrollLeft :
  
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
  
return evt.clientY + (document.documentElement.scrollTop ?
  
document.documentElement.scrollTop :
  
document.body.scrollTop);
else return null;
}
Mouse Cursor Position
Join the Discussion
Questions? Comments?
Until recently there was no standard way of determining the position of the mouse cursor within the browser. The W3C standards say that the current mouse cursor position within the browser window when an event is triggered should be given by event.clientX and event.clientY to obtain the distance from the left and top of the browser window respectively.
I have tested this in a number of different browsers and have found that Internet Explorer 6, Netscape 6+, Firefox, and Opera 7+ all produce correct values for the mouse coordinates relative to the browser window in these fields. To obtain the position within the web page you would simply add the scroll position of the page within the browser window.
Opera 5 and 6 produced values for these fields but the values are relative to the top of the web page instead of relative to the browser window and so adding the scroll position would produce a wrong result with these browsers. Netscape 4 doesn't understand these fields at all and so would give an error if this code were used by itself.
One added complication is that Internet Explorer uses two different ways to determine the scroll position of the page. It uses document.body.scrollLeft and document.body.scrollTop in versions before version 6 as well as in version 6 when there is no DOCTYPE declared or a transitional DOCTYPE is declared. When IE6 is declared using a strict DOCTYPE document.documentElement.scrollLeft and document.documentElenent.scrollTop are used instead. Other browsers either use one of these values or pageXOffset and pageYOffset.
Although not part of the W3C standards there is another pair of fields that will give the position of the mouse cursor that is useful. With the exception of Internet Explorer and Opera 5 and 6, all of the browsers I have mentioned also support event.pageX and event.pageY which give the mouse cursor position relative to the top left corner of the web page itself. Using these fields you do not have to add the scroll position of the page.
By combining tests for both of these methods together we can create code to locate the mouse cursor position that will work on Internet Explorer, Netscape 4+, Firefox, and Opera 7+. You just need to pass the event to the following functions to retrieve the appropriate position on the web page.
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}
There are a couple of other pairs of fields that give mouse cursor positions that are less useful. The fields event.screenX and event.screenY are defined in all of the browsers I tested. They give the position of the mouse cursor relative to the top left corner of the screen. Without knowing the position of the top left corner of the browser window this information is not very useful with respect to being able to interact with the web page.
The fields event.x and event.y also exist in Netscape 4, Internet Explorer, and Opera 7+. In Netscape 4 these fields give the position within the web page exactly the same as the pageX and pageY fields. In Internet Explorer and Opera 8 they give the position of the mouse cursor within the current object (if that object is positioned absolute, relative, or fixed) or within the page (for static objects). Opera 7 appears to use these fields to give the position of the mouse cursor relative to the bottom left corner of the screen.
还要其他的情况:
调用方法:
var pos=GetObjPos(ID); 
function CPos(x, y) 
{ 
this.x = x; 
this.y = y; 
} 
//获取控件的位置 
function GetObjPos(ATarget) 
{ 
var target = ATarget; 
var pos = new CPos(target.offsetLeft, target.offsetTop); 
var target = target.offsetParent; 
while (target) 
{ 
pos.x += target.offsetLeft; 
pos.y += target.offsetTop; 
target = target.offsetParent 
} 
return pos; 
}

下面是我自己开发项目中的实例:
<script type="text/jscript" language="jscript" > function showPopup(obj,evt) { 
var strDate = $(obj).attr('dateTime'); 
var strUserName = $(obj).attr('userName'); 
var id = "event_" + strDate.replace(/-/g, ''); 
var box = $('#'+id); 
if (box.length == 0) { 
$(document.body).append("<div id='" + id + "' class='popupinfo'></div>"); 
box = $('#' + id); 
box.css("position", "absolute"); 
box.css("display", "block"); 
box.css("z-index", "100"); 
box.append('<input id="File1" type="image" src="../Images/Onload.gif"/>'); 
Microsoft.PMWeb.WebSite.SiteService.GetEventInfoByDate(strUserName + "#" + strDate, onSuccess, onFailed, "1111"); 
} 
else { 
var imgLoad = box.find(":image"); 
imgLoad.css("display", "none"); 
} 
var objQueryPosition = GetObjPos(obj); 
box.css("left", mousePos.x); 
box.css("top", mousePos.y); 
box.css("display", ""); 
function onSuccess(result, context, methodName) { 
var imgLoad = box.find(":image"); 
imgLoad.css("display","none"); 
box.append(result); 
} 
function onFailed(error, context, methodName) { 
var errorMessage = error.get_message(); 
alert("Review Failed:" + errorMessage); 
} 
} 
function hidePopup(obj) { 
var strDate = $(obj).attr('dateTime'); 
var strUserName = $(obj).attr('userName'); 
var id = "event_" + strDate.replace(/-/g, ''); 
var box = $('#'+id); 
if (box.length != 0) { 
$('#'+id).css("display", "none"); 
} 
} 
var mousePos; 
function mouseMove(ev) { 
ev = ev || window.event; 
mousePos = mouseCoords(ev); 
} 
function mouseCoords(ev) { 
if (ev.pageX || ev.pageY) { 
return { x: ev.pageX, y: ev.pageY }; 
} 
return { 
x: ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft), 
y: ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) 
}; 
} 
document.onmousemove = mouseMove; 
</script>
Javascript 相关文章推荐
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
js实现随机点名器精简版
Jun 29 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 #Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 #Javascript
一个js写的日历(代码部分网摘)
Sep 20 #Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 #Javascript
js表格分页实现代码
Sep 18 #Javascript
ext 同步和异步示例代码
Sep 18 #Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php目录操作实例代码
2014/02/21 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
巧用canvas
2017/01/21 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
python 创建弹出式菜单的实现代码
2017/07/11 Python
python方向键控制上下左右代码
2018/01/20 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
运动会广播稿30字
2014/01/21 职场文书
幼儿园安全责任书
2014/04/14 职场文书
施工安全承诺书
2014/05/22 职场文书
医院节能减排方案
2014/06/13 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
五年级下册复习计划
2015/01/19 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP