JS魔法堂:关于元素位置和鼠标位置的属性

一、关于鼠标位置的属性                        

  1. 触发鼠标事件的区域

      盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件。

  2. 鼠标事件对象MouseEvent下的属性

      [a].  evt.pageX/Y :以页面左上角为参考点,表示当前触发点离页面左上角的水平和垂直距离。

      注意:1. IE5.5~8不支持该属性,polyfill方法pageX = clientX + scrollLeft                  2. 页面左上角并不是指html或body标签的盒子模型border外边框的左上角,而是document的左上角,是不能通过css来调整位置的。

      [b].  evt.clientX/Y :以可视区域左上角为参考点,表示当前触发点离可视区域左上角的水平和垂直距离。

       注意:所有浏览器均支持

      [c].  evt.offsetX/Y :以触发点所在dom的左上角为参考点,表示当前触发点离触发点所在dom的左上角的水平和垂直距离。

      注意:1. Chrome下将以dom的border外边框的左上角作为参考点;                  2. IE5.5~9下将以dom的content的左上角作为参考点;                  3. FF不支持该属性

      [d].  evt.screenX/Y :以屏幕左上角为参考点,表示当前触发点离屏幕左上角的水平和垂直距离。

      注意:所有浏览器均支持

     [e].  evt.layerX/Y :当触发点所在的dom的position为relative或absolute时,则以dom的border外边框的左上角作为参考点,否则就以页面左上角为参考点(与pageX一致了)。

     注意:IE5.5~8不支持

二、关于元素位置的属性                        

1.  HTMLElement.clientLeft/Top :元素左border的宽度和上border的高度。

2.  HTMLElement.clientWidth/Height :元素content+padding-滚动条的宽度或高度。

3.  HTMLElement.offsetWidth/Height :元素content+padding+border的宽度或高度。

4.  HTMLElement.scrollLeft/Top :元素水平、垂直滚动条切去的宽度或高度。

注意:FF在W3C标准模式下,document.documentElement.scrollLeft/Top获取页面滚动条切去的部分;W3C怪异模式下,则采用body.scrollLeft/Top来获取

5.  HTMLElement.offsetParent :最近一个已进行CSS定位的祖先元素。

6.  HTMLElement.offsetTop/Left :元素border外边框的左上角离offsetParent的padding外边框的左上角的垂直、水平距离。若offsetParent为body或 html标签,且body的position不为relative或absolute时,offsetTop/Left为元素border外边框的左上角 离页面左上角的垂直、水平距离。若body的position为relative或absolute时,则为元素border外边框的左上角离 offsetParent的padding外边框的左上角的垂直、水平距离。

注意:IE,FF,Chrome下,怪异模式和标准模式的最顶层offsetParent均为body元素,body.offsetParent和document.documentElement.offsetParent均为null。

三、总结                              

   在写拖拽层和polyfill html5特性placeholder时,上述内容为基础知识,同时会减少很多不必要的代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蜉蝣禅修之道

android控制view的大小和位置(二)

14110
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

14340
来自专栏移动开发

PullBezierZoomView 一个具有贝塞尔曲线下拉效果的自定义view

该控件效果基于PullZoomView源码改动的而来,感谢Frank-Zhu的开源代码.该控件具有下拉放大背景图和贝塞尔曲线的效果.

12550
来自专栏ShaoYL

iOS---设置控件的内容模式

366120
来自专栏前端之路

–探索CSS3动画、过渡

16550
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之vertical-align

1、vertical-align基本认识   支持的属性值:     ①线类:baseline(默认),top,middle,bottom     ②文本类:t...

35250
来自专栏欧阳大哥的轮子

UIButton实现各种图文结合的效果以及原理

iOS的UIButton是一个非常常见而且常用的控件,我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只有文字的Button,也可以建立只有图片的Bu...

29810
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

12140
来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

11010
来自专栏木子昭的博客

<jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

在前端页面的布局过程中,作者遇到了,这样一个问题 当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时...

308100

扫码关注云+社区

领取腾讯云代金券