zoukankan      html  css  js  c++  java
  • 如何更好的理解(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
  • 相关阅读:
    httpd服务器的真实ip获取难题
    nginx配置文件详解
    nginx基础知识总结
    Web服务并发I/O模型
    chrony时间服务器
    Linux运维之每日小技巧-检测网站状态以及PV、UV等介绍
    Centos7系统下编写systemd脚本设置redis开机自启动
    Kibana中的Coordinate Map地图报索引错误的问题
    apache的php模块讲解以及搭建phpmyadmin管理数据库mysql
    AMP架构补充与wordpress部署
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4398894.html
Copyright © 2011-2022 走看看