JavaScript获取鼠标坐标的函数（兼容IE、FireFox、Chrome）

更新时间：2010年01月13日 03:41:27 作者：

下午想做个鼠标跟随的JS脚本，发现浏览器兼容问题还真是烦人，还有滚动条位置的问题。

还好网上什么都有，上网找了一个浏览器兼容性最佳的函数，经测试兼容IE、FireFox、Chrome，并且不会有滚动条误差问题，存档下，以备后用 :)

function mousePos(e){ 
    var x,y; 
    var e = e||window.event; 
    return { 
        x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
        y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop 
    }; 
}

注：此函数配合onmousemove事件使用。
函数出处：鼠标跟随提示框 by nunumick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标跟随提示框</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body{font:12px/1.8 arial;} a,a:visited{color:#3366cc;text-decoration:none;} a:hover{color:#f60;text-decoration:underline;} .tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;} img{border:none;} </style> <script type="text/javascript"> var tip={$:function(ele){     if(typeof(ele)=="object")         return ele;     else if(typeof(ele)=="string"||typeof(ele)=="number")         return document.getElementById(ele.toString());         return null;     },     mousePos:function(e){         var x,y;         var e = e||window.event;         return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};     },     start:function(obj){         var self = this;         var t = self.$("mjs:tip");         obj.onmousemove=function(e){             var mouse = self.mousePos(e);                 t.style.left = mouse.x + 10 + 'px';             t.style.top = mouse.y + 10 + 'px';             t.innerHTML = obj.getAttribute("tips");             t.style.display = '';         }         obj.onmouseout=function(){             t.style.display = 'none';         }     } } </script> </head> <body> <ol> <li> <a href="https://www.jb51.net/article/21812.htm" target="_blank"><img src="https://www.jb51.net/images/logo.gif" onmouseover="tip.start(this)" tips="JQuery获取元素文档大小、偏移和位置和滚动条位置的 " /></a> </li> <li> <a href="https://www.jb51.net/article/21808.htm" target="_blank" onmouseover="tip.start(this)" tips="Javascript 实现TreeView CheckBox全选效果 ……">关于用户研究的一点思考</a> </li> <li> <a href="https://www.jb51.net/article/21806.htm" target="_blank" onmouseover="tip.start(this)" tips="JavaScript 学习笔记（九）call和apply方法 ……">WEB重构拾趣</a> </li> </ol> <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Three.js 中的屏幕空间环境光遮蔽SSAO
这篇文章主要为大家介绍了Three.js 中屏幕空间环境光遮蔽SSAO的原理及实现解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
利用JS判断数据类型的四种方法
面试的时候经常会问到JS 中判断数据类型的方法，一般常用的就是typeof了，其他的也想不起来，今天特意在网上查了一下来总结,这篇文章主要介绍了利用JS判断数据类型的四种方法,需要的朋友可以参考下
2021-08-08
JavaScript中代理与反射的用法详解
JavaScript作为一门灵活而强大的语言,提供了代理（Proxy）与反射（Reflect）这两个元编程工具,它们为开发者提供了更深层次的语言控制和操作,在本篇博客中,我们将深入研究代理与反射的概念、用法,以及如何巧妙地结合它们来实现高级的编程技巧,需要的朋友可以参考下
2023-12-12
ko knockoutjs动态属性绑定技巧应用
ko的动态属性是指，ViewModel不确定的属性，而后期却需要的属性,本文将详细介绍，需要的朋友参考下
2012-11-11
JS实现水平移动与垂直移动动画
这篇文章主要为大家详细介绍了JS实现水平移动与垂直移动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
快速查找数组中的某个元素并返回下标示例
最近在写jquery的combobox插件时遇到效率问题，再加上jquery选择器的类帅选，导致效率很慢，采用以下方式二，可以轻松解决此问题
2013-09-09
javascript getElementsByClassName实现代码
根据元素clsssName得到元素集合的函数，需要的朋友可以参考下。
2010-10-10
JavaScript从数组的indexOf()深入之Object的Property机制
这篇文章主要介绍了JavaScript从数组的indexOf()深入——Object的Property机制的相关资料,需要的朋友可以参考下
2016-05-05
Javascript拖拽系列文章1之offsetParent属性
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读
2008-09-09
JavaScript中检测数据类型的四种方法总结
这篇文章主要为大家详细介绍了四个JavaScript中检测数据类型的常用方法，文中的示例代码讲解详细，具有一定的参考价值，需要的可以参考一下
2023-04-04