• 如何更好的理解(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)


    1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条。(火狐特有)

    2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X,Y坐标,和page 不同的是计算区域不包括窗口自身的控件和滚动条。

    3 event.X和event.Y:相对于当前窗口,设置或获取鼠标指针位置相对于父文档的x,y像素坐标(可惜火狐不支持,人生总要有些遗憾也是没办法的)。

    4 scrollX,scrollY:望文生义,相对于浏览器而言的,随滚动条移动而变化。

    5 screenX,screenY:事件发生时鼠标指针相对于屏幕的水平坐标和竖坐标(屏幕左上角的位置)(这个可是跟屏幕大小有关系的啦,不过IE不支持该属性,只读属性)

    6 针对5呢,IE是用screenLeft和screenTop(等于screenY+工具栏+地址栏的像素)。话到嘴边了,再说一下innerwidth innerHeight吧,嘿嘿,他两是窗口文档显示区域的宽度,不包括边框和滚动条,该属性可读可写。

    7 event.offsetX,event.offsetY:设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 (触发事件的元素,ie,chrome支持此属性,火狐不支持)

    8 offsetLeft:值得注意的是该属性并非事件对象的属性,他是DOM对象所有的,获取的是相对于父对象的左边距。该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。

    9 style.left:获取的是相对于具有定位属性(position定义为relative)的父对象的左边距。

    10 9是读写的,8是只读的,所以要想改变div的位置,只能修改style.left.并且9的值需要在html里预先定义。8则无需事先定义div的位置

    先写到这里吧~欢迎大家吐槽纠正以及补充~

    欢迎关注微信公众号:“花栗鼠的红松树” 知乎专栏:“花栗鼠的红松树” 知乎: 卓怡 https://www.zhihu.com/people/zhuoyisun/activities
  • 相关阅读:
    Java8 Stream Function
    PLINQ (C#/.Net 4.5.1) vs Stream (JDK/Java 8) Performance
    罗素 尊重 《事实》
    小品 《研发的一天》
    Java8 λ表达式 stream group by max then Option then PlainObject
    这人好像一条狗啊。什么是共识?
    TOGAF TheOpenGroup引领开发厂商中立的开放技术标准和认证
    OpenMP vs. MPI
    BPMN2 online draw tools 在线作图工具
    DecisionCamp 2019, Decision Manager, AI, and the Future
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4398894.html
Copyright © 2020-2023  润新知