理解screenX clientX pageX概念
先了解screenX,clientX,pageX概念
screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。
clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点不会随之滚动条的移动而移动。
pageX: 参照点也是浏览器内容区域的左上角,但它会随着滚动条而变动
下面看看具体的各个对象中的这些属性
window对象
(1)window.screenX,window.screenY
返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的水平距离和垂直距离,单位为像素。
(2)window.innerHeight,window.innerWidth
返回网页在当前窗口中可见部分的高度和宽度,包括滚动条的高度和宽度
(3)window.outerHeight,window.outerWidth
返回浏览器窗口的高度和宽度,包括浏览器菜单和边框
(4)window.pageXOffset,window.pageYOffset
返回页面的水平垂直滚动距离
Screen对象
availHeight 返回屏幕的高度(不包括Windows任务栏)
availWidth 返回屏幕的宽度(不包括Windows任务栏)
height 返回屏幕的总高度
width 返回屏幕的总宽度
Element对象盒状模型相关属性
(1)Element.clientHeight,Element.clientWidth
返回元素的可见高度和宽度,计算公式:clientHeight = topPadding + bottomPadding+ height - scrollbar.height
(2)Element.clientLeft,Element.clientTop
元素节点左边框(left border)的宽度,网页元素顶部边框的宽度,这两个属性包括滚动条的宽度,但不包括Margin和Padding。
(3)Element.offsetHeight,Element.offsetWidth
返回元素的高度和宽度,计算公式:offsetHeight = clientHeight + 滚动条 + 边框
(4)Element.offsetLeft,Element.offsetTop 返回元素的水平和垂直位移
默认是参照body元素,当然也可以设置position:relative来改变属性
(5)Element.scrollHeight,Element.scrollWidth
返回元素的整体高度和宽度,计算公式:scrollHeight = topPadding + bottomPadding + 内容高度
(6)Element.scrollLeft,Element.scrollTop
返回元素左边缘和右边缘与视图之间的距离
event对象
(1)event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
(2)event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
(3)event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性
(4)event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
理解screenX clientX pageX概念的更多相关文章
- screenX clientX pageX的区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...
- screenX clientX pageX区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...
- screenX, clientX, pageX
screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- JS-特效 ~ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
- Effective Objective-C 2.0 — 第二章 对象、消息、运行期 - 第六条:理解“属性”这一概念
开发者通过对象来 存储并传递数据. 在对象之间传递数据并执行任务的过程就叫做“消息传递”. 这两条特性的工作原理? Objective-C运行期环境(Objective-C runtime) ,提供了 ...
- 理解maven的核心概念
原文出处:http://www.cnblogs.com/holbrook/archive/2012/12/24/2830519.html 好久没进行java方面的开发了,最近又完成了一个java相关的 ...
- 理解 UWP 视图的概念,让 UWP 应用显示多个窗口(多视图)
原文 理解 UWP 视图的概念,让 UWP 应用显示多个窗口(多视图) UWP 应用多是一个窗口完成所有业务的,事实上我也推荐使用这种单一窗口的方式.不过,总有一些特别的情况下我们需要用到不止一个窗口 ...
- JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
随机推荐
- Ubuntu中PyCharm中字体设置
在Ubuntu安装的PyCharm与Windows不同,除了Editor中的字体.配色需要设置外,文件操作栏(File--Edit--View--Navigate--Code--Refactor--- ...
- http://blog.csdn.net/zhang_xinxiu/article/details/38655311
一.Activiti下载及简介 1.1.Activiti下载 官网下载地址:http://activiti.org/download.html Note:下载时不一定要使用最新版本的,最 ...
- 设置Tomcat的UTF-8编码
利用request.setCharacterEncoding("UTF-8");来设置Tomcat接收请求的编码格式,只对POST方式提交的数据有效,对GET方式提交的数据无效! ...
- Arrays.sort 与 Collections.sort
代码如下: package com.wangzhu.arrays; import java.util.Arrays; import java.util.Collections; public clas ...
- LinearLayout按下(pressed)或获取焦点(focused)时背景设置不同颜色或图片
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...
- 如何使用GetManifestResourceStream
在做开发时想要从程序集中加载一个xml文件数据,可是在运行后确取不到值,值始终是null. 代码如下: Stream ss = this.GetType().Assembly.GetManifestR ...
- 在Sublime Text 3中配置编译和运行C++程序
下载解压MinGW至目标目录,本次安装的解压目录为C:\MinGW 设置环境变量.右击我的电脑,属性-->高级-->环境变量. 在系统环境变量PATH里添加C:\MinGW\bin(如果里 ...
- mapreduce: InputFormat详解 -- RecordReader篇
InputFormat是MapReduce中一个很常用的概念,它在程序的运行中到底起到了什么作用呢? InputFormat其实是一个接口,包含了两个方法: public interface Inpu ...
- jdbcTemplate 获取数据表结构
jdbcTemplate 操作方法 /** *1.方法一: */ String sql = "select * from "+ tableName; //RowCountCallb ...
- JQuery对XML文件的操作
xml文件如下: <?xml version="1.0" encoding="utf-8" ?> <Root> <Parent&g ...