JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scr...

最新推荐文章于 2025-03-19 14:23:25 发布

weixin_30275415

最新推荐文章于 2025-03-19 14:23:25 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mrszhou/p/7741852.html

本文详细解析了在Web开发中如何使用JavaScript来获取鼠标点击的位置（包括基于浏览器窗口和基于网页文本的坐标），以及如何获取DOM元素的位置信息（如相对定位父级的坐标、元素的宽高等）。同时提供了兼容不同浏览器版本的解决方案。

 1   /*在事件的内部console.dir(event)*/
 2         /**
 3          * 事件对象event
 4          *      clientX/clientY 获取鼠标基于浏览器窗口（可视区域的坐标位置）全兼容
 5          *
 6          *      pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容
 7          *      -- 兼容方案：clintY+页面滚动出去垂直距离
 8          * */
 9 
10         /**
11          * console.dir(element)
12          * 元素element
13          *      offsetLeft/offsetTop  获取基于offsetParent<--当前元素的定位父级元素>相对的坐标值
14          *      offsetWidth/offsetHeight 获取元素的实体范围的宽高 content+padding+border
15          *      scrollLeft/scrollTop  获取元素滚动出去的距离
16          *      scrollWidth/scrollHeight 滚动框里面的盒子(滚动元素)大小    不常用
17          *      clientHeight/clientWidth 获取盒子的宽高，不包含滚动条
18          * */