微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Javascript在IE或Firefox下获取鼠标位置的代码_javascript技巧

php中文网
发布： 2016-05-16 18:39:00
原创
1247人浏览过
第一段代码是利用全局变量来获取实时鼠标的位置。
复制代码 代码如下:

var xPos;
var yPos;
window.document.onmousemove(function(evt){
evt=evt || window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
} else {
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
});


因为IE和Firefox对clientX的解析不一样，IE认为clientX是鼠标相对整个页面左上角的位置，而Firefox认为是相对当前所见页面左上角的位置。而这段代码最终返回的结果是整个页面左上角的位置。这段代码的缺陷是，xPos和yPos是实时变动的。

第二段代码是通过函数获取当前时刻的鼠标坐标值

复制代码 代码如下:

document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}


这段代码的来源是这里，这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的，先触发mousemove事件，然后获取了事件之后，分别判断浏览器类型。这段代码的优点是，不适用全局变量，并且可以随用随拿，只要调用这个函数，就能够获取鼠标坐标。

这两段代码，个人偏好于后者，现在先把这段代码记下来，这段代码应该是会经常被使用到的。
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Javascript 多浏览器兼容性问题及解决方案_javascript技巧 下一篇：js textarea自动增高并隐藏滚动条_表单特效
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JS排序算法实现_快速排序优化方案 快速排序平均时间复杂度为O(nlogn)，通过三数取中和小数组插入排序可优化性能。
2025-11-14 22:29:02
304
前端JS怎样与Spring缓存机制配合_前端JS与Spring缓存机制配合使用方法 前端JavaScript通过规范请求与HTTP缓存头，配合Spring后端的@Cacheable、@CachePut等机制实现协同：1.使用一致GET请求触发缓存命中；2.更新时调用对应接口使后端刷新缓存；3.利用Cache-Control、ETag等响应头让浏览器自动管理缓存；4.需实时数据时添加时间戳或设no-cache绕过缓存，确保数据一致性。
2025-11-14 22:23:16
471
JS装饰器编程_Decorator应用指南 装饰器是一种函数，用于在不修改原始代码的情况下增强类、方法、属性或参数的行为。通过@符号应用于目标声明，运行时接收元信息并返回修改后的描述符或对象。类装饰器可修改类定义，如冻结实例或添加元数据；方法装饰器通过descriptor控制方法行为，实现只读、日志、性能监控等；属性和参数装饰器主要用于元数据标注，常用于依赖注入和参数标记，需配合ReflectMetadata使用。尽管JavaScript装饰器尚处Stage2，TypeScript和框架如Angular、NestJS已广泛支持，提供声明式
2025-11-14 22:23:02
970
JS元素定位怎么获取_JS DOM元素获取与位置尺寸计算方法 使用getBoundingClientRect()可获取元素相对于视口的位置和尺寸，结合offsetWidth、clientHeight等属性可精确控制布局，常用于滚动监听与弹窗定位。
2025-11-14 22:20:02
302
页面生命周期事件剖析_DOMContentLoaded与Load DOMContentLoaded在DOM解析完成后触发，不等待资源加载，适合操作DOM；Load在所有资源加载完毕后触发，适用于依赖完整资源的场景。
2025-11-14 22:19:33
921
JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法 通过原生JavaScript可实现复选框全选、反选与状态同步：1.用checkAll控制所有item类复选框的选中状态；2.通过循环遍历将每个item的checked属性取反实现反选；3.监听每个子项的change事件，判断是否全部选中以同步“全选”状态。
2025-11-14 21:58:34
466
对象合并与拷贝方法_浅拷贝与深拷贝实现 答案是浅拷贝仅复制对象第一层属性，深拷贝递归复制所有层级。常用浅拷贝方法有Object.assign()和扩展运算符；深拷贝可使用JSON.parse(JSON.stringify())或递归实现，以避免引用共享导致的数据污染。
2025-11-14 21:55:02
345
JS注解怎么标注Promise对象_ JS Promise类型参数的注解方法 使用JSDoc标注Promise类型可提升JavaScript代码的可读性和维护性。1.用@returns{Promise}明确函数返回值类型，如{Promise}，使编辑器能推断异步结果结构；2.用@param{Promise}注解参数类型，如接收字符串数组Promise的函数，明确要求传入resolve为string[]的Promise；3.支持多种泛型形式，包括Promise、Promise、Promise和Promise
2025-11-14 21:54:06
145
js迭代器模式是什么 迭代器是符合迭代器协议的对象，拥有next方法，返回包含value和done属性的对象，用于顺序访问集合元素而不暴露内部结构。
2025-11-14 21:51:30
341
JS闭包应用场景_JavaScript高级技巧剖析 闭包能访问词法作用域变量并实现数据私有化、事件回调、函数柯里化和防抖节流。1.通过IIFE封装私有变量；2.在循环中用闭包绑定正确索引值；3.柯里化利用闭包保存参数；4.防抖函数依赖闭包维持定时器状态，提升性能。
2025-11-14 21:49:51
377
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部