当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js获取鼠标位置杂谈附多浏览器兼容代码

Javascript
实现表格中行点击时的渐扩效果!
多图展示滑动过渡效果
弹出自适应图片大小的窗口弹出窗口根据图片大小,自动判断高和宽。
拖动Html元素集合 Drag and Drop any item
脚本吧 - 幻宇工作室用到js,超强推荐base.js
使用透明叠加法美化文件上传界面
JavaScript高级程序设计
对象的类型:本地对象(1)
如何实现表格中行点击时的渐扩效果!
使用button标签,实现三态图片按钮
根据分辩率调用不同的CSS.
Web版彷 Visual Studio 2003 颜色选择器
JS中简单的实现像C#中using功能(有源码下载)
js之WEB开发调试利器:Firebug 下载
jQuery中文入门指南,翻译加实例,jQuery的起点教程
jQuery 1.0.4 - New Wave Javascript(js源文件)
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
换肤测试程序js脚本
xWin之JS版(2-26更新)
共享自己写一个框架DreamScript

Javascript 中的 js获取鼠标位置杂谈附多浏览器兼容代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 323 ::
收藏到网摘: n/a

最近在搞一个AJAX的小功能,目的是用浮动div框显示当前鼠标下控件的详细信息,其中获得鼠标位置这块害得我走了很多冤枉路,因为压根没有想到我下面提到的第二点的区别,所以我的页面出来总是找不到我之前定义的那个div 其实获得鼠标位置就是一句话的事情,但是要是不了解浏览器间的区别,整个过程就会让人很郁闷,区别在与:
1.IE下获得x和y轴的距离分别用event.x和event.y;
FF下获得x和y轴的距离分别用event.pageX和event.pageY;
2.IE下用此方法获得的位置是不算滚动条滚过的位置的,即它只会算到浏览器边缘;
FF则会算进滚过去的那些位置;
(这个地方很让我崩溃,为这么点小区别我把所有用到的程序全部重写了一遍,囧死……)
解决1的办法,无非是判断一下浏览器,然后用什么方式;
解决2的办法,是在IE的情况下在x和y轴分别加上document.documentElement.scrollTop和document.documentElement.scrollLeft;
对JS我了解的比较少,如果大家有更好的建议欢迎留言指教!谢谢
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]