点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕
结论:
1,X,Y的都是属于点击位置的,width、height、left、top都是属于DOM的。
2,涉及的所有位置只与document或DOM内部有关,与DOM如何定位,周围有没有其他占位HTML元素,DOM有没有父级元素等统统无关。
说明:每次点击都是点击绿色方块的中心点,绿色方块的CSS代码如下:
PC端:
属于点击位置:
1:clientX && clientY是点击位置到document左上角(不是body)的距离。
2.offsetX && offsetY是点击位置距离当前被点击DOM元素(即$event.target)的左上角,但不包括border和margin的距离。
3.pageX && pageY。忘掉它吧,pageX = clientX + scrollLeft , pageY = clientY + scrollTop。这也就是说,在没有滚动的时候它与clientX、clientY大小相等。
属于被点击DOM:
1.clientWidth && clientHeight是DOM包括padding但不包括margin和border的宽高。
2.offsetWidth && offsetHeight。比clientWidth && clientHeight大一点点,多了条border。
3.clientLeft && clientTop,就是border-left和border-top。
4.offsetLeft && offsetTop。是DOM的border的左上顶点到第一个不为static定位的祖先级容器的左上顶点的距离。
移动端:
属于点击位置:
1,touches[0].clientX && touches[0].clientY与PC端的clientX、clientY同义。
2.touches[0].pageX && touches[0].pageY与pageX、pageY同义。
3.移动端没有offsetX和offsetY。
属于被点击DOM:
与PC端DOM的一众属性完全相同。
点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕的更多相关文章
- android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)
在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...
- Unity 3D物体的点击事件响应以及NGUI坐标和世界坐标的互相转换
Unity 版本:4.5 NGUI版本:3.6.5 参考链接:http://game.ceeger.com/Script/Camera/Camera.ScreenPointToRay.html,Uni ...
- android 项目学习随笔十三(ListView实现ITEM点击事件,将已读状态持久化到本地)
1.因为给LISTVIEW增加了两个头布局,所以在点击事件ITEM索引会增加2,比如原来第一条数据的索引应该为0,增加两个头布局后,它的索引变为 2,为了使LISTVIEW的ITEM在点 ...
- CoreText实现图文混排之点击事件-b
CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UIT ...
- CoreText实现图文混排之点击事件
今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...
- 关于iOS应用管理之九宫格的坐标计算以及与UIScrollView的结合
关于九宫格的布局以及坐标的计算,对于大多数的iOS初学者甚至有一定能力的学者来说都是一大难题,在此写者通过自己的开发经验以及多次应用,把自己的所学所得分享给大家,就通过应用管理来进行浅谈一二. ...
- JS怎样将拖拉事件与点击事件分离?
帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...
- android的多次点击事件的实现(有源码)
三次点击事件的原理图:数组的复制(android源码的调用): 下面就是第一步: 创建long数组,里面的数字代表点击的次数. 下面是主要代码实现: system.arraycopy();里面的参数描 ...
- [Android]通过adb shell input上报命令模拟屏幕点击事件【转】
本文转载自:http://blog.csdn.net/yuanzihui/article/details/52871652 常用的 input上报命令: input text 1234 实际向界面注入 ...
随机推荐
- ETCD:多机上的集群
原文地址:cluster on multiple machines 总览 启动一个集群静态的要求是每一个集群中的成员需要知道其他成员的位置.在许多情况下,集群成员的IP可能无法提前知道.在这种情况下, ...
- linu运行级别
一.介绍 0:关机 1:单用户[找回丢失密码] 2:多用户状态[无网络服务] 3:多用户状态[有网络服务] 4:保留级别 5:图形界面 6:系统重启 二.命令行运行级别 比如说关机 init 0 三. ...
- python连数据库制作音乐软件
import pymysql conn = pymysql.connect(host="localhost",user="root",password=&quo ...
- 实操《kubernetes网络权威指南》之tun设备
跟着网上作一次,OK的. tun.c #include <net/if.h> #include <sys/ioctl.h> #include <sys/stat.h> ...
- 运用tensorflow写的第一个神经网络
因为实训课要用LSTM+attention机制在钢材领域做一个关系抽取.作为仅仅只学过一点深度学习网络的小白在b站上学习了RNN,LSTM的一些理论知识. 但只懂得一些理论知识是无法完成关系抽取的任务 ...
- openjdk源码下载
http://hg.openjdk.java.net/jdk8u/jdk8u60/jdk/file/935758609767 browse>zip
- 【51nod1678】lyk与gcd(莫比乌斯反演+枚举因数)
点此看题面 大致题意: 一个长度为\(n\)的数组,实现两种操作:单点修改,给定\(i\)求\(\sum_{j=1}^na_j[gcd(i,j)=1]\). 莫比乌斯反演 考虑推一推询问操作的式子: ...
- 2019csp-s
11.17一切尘埃落定 回来之后一直“沉迷”文化课,不想去面对自己,更多的可能是不敢吧 晃晃悠悠一个星期过去了 其实信息学考完就知道成绩了,很垃圾,不想去想,所以沉迷解析几何无法自拔(但好像也做不对几 ...
- 第04组 Alpha冲刺(4/4)
队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(4/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.分配展示任务 2.收集各个组员的进度 3.写博客 展示GitHub当日代码/文 ...
- 第04组 Alpha冲刺(1/4)
队名:斗地组 组长博客:地址 作业博客:Alpha冲刺(1/4) 各组员情况 林涛(组长) 过去两天完成了哪些任务: 1.安排好各个组员的任务 2.收集各个组员的进度 3.写页面 4.写博客 展示Gi ...