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
  • 相关阅读:
    webpack / vue项目 config/index.js配置(用于配置webpack服务器代理)
    vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)
    Vue 组件之间传值
    js实现把textarea通过换行或者回车把多行数字分割成数组,并且去掉数组中空的值。
    sublime text3 插件安装方法
    webpack配置sass模块的加载
    display:table和display:table-cell的妙用
    根据输入地址获得经纬度
    pytest 学习笔记二:兼容unittest、执行方式、生成报告
    pytest 学习笔记一:参数化与组织分层
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4398894.html
Copyright © 2011-2022 走看看