clientX .offsetX .screenX x 的区别
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
以上概念来源于网络。具体细节待我理解清楚之后再进行补充说明。
- clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的!
- offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如你单击a区域,值是相对于a所在区域而言!
- clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言!
- screenX是相对与客户端显示器而言,是绝对位置!
clientX .offsetX .screenX x 的区别的更多相关文章
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- clientX,offsetX,screenX,pageX 区别!
先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...
- pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解
https://www.cnblogs.com/echolun/p/9231760.html
- event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...
- event对象的clientX,offsetX,screenX,pageX
chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...
- [1]区分event对象中的[clientX,offsetX,screenX,pageX]
前言 在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXeven ...
- JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...
随机推荐
- SQL处理数组,字符串转换为数组
原文转载自:http://hi.baidu.com/gagahjt/item/fd081316450f05028ebde413 一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串 ...
- js储存参数的数组arguments
js函数中有个储存参数的数组arguments ,所有函数获得的参数会被编译器挨个保存到这个数组中.于是我们的js版支持参数默认值的函数可以通过另外一种变通的方法实现 function simue ( ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 理解Angular中的$apply()以及$digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- TI PDK3.0 qt 交叉编译环境设置
上午剑锋给的方法,成功在qtcreator上面加入TI官方的qmake以及他的交叉编译器. 1. 步骤如下: 1. 我假设TI PDK3.0 安装目录为顶层目录. 2. 进入linux-devkit ...
- python之路十四
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- poj 3614
http://poj.org/problem?id=3614 题意:有n头奶牛想要晒太阳,但他们每个人对太阳都有不同的耐受程度,也就是说,太阳不能太大也不能太小,现在有一种防晒霜,涂抹这个防晒霜可以把 ...
- Div 定时移动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- centos7.0 下安装git(ssh方式)
最近刚弄了个阿里云,在上面弄个git服务器,这里只弄了ssh方式访问,http方式访问的可以看我另外一个随笔http://www.cnblogs.com/hz-cww/p/6077970.html. ...