点击事件的坐标计算(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 实际向界面注入 ...
随机推荐
- SpringCloud微服务(05):Zuul组件,实现路由网关控制
本文源码:GitHub·点这里 || GitEE·点这里 一.Zuul组件简介 1.基础概念 Zuul 网关主要提供动态路由,监控,弹性,安全管控等功能.在分布式的微服务系统中,系统被拆为了多个微服务 ...
- Web前端基础(10):JavaScript(四)
1. 伪数组arguments arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用. 1.1 返回参数个数 返回函数实参的个数:arguments.length 例子: ...
- PHP实现支付宝登录
1.支付宝路由拼接 public function dev() { $http = 'https://openauth.alipaydev.com/oauth2/publicAppAuthorize. ...
- 如何在CAD图纸中进行线性标注
在CAD中,都会在图纸中进行CAD标注,一般都是有CAD标注样式.CAD标注文字等.那其中有一个就是CAD线性标注?可以标注图纸间的距离?那如何在CAD图纸中进行线性标注呢?具体要怎么来进行操作?本篇 ...
- C#(1)运用C#实现一键从Word文档转换TXT文本的功能
有想直接从Word转TXT文本的可以看看,懒得复制粘贴的也可以使用下,方便而快捷!! 首先打开vs2012创建一个简单的form窗体: 里面主要的就是一个存放Word文档的button和一个执行的bu ...
- SAP记账期间变式
记帐期间变式能够控制每个公司代码中打开的记账期间,包括正常记账期间和特别记账期间.可以为企业组织架构中的每个公司代码定义一个归其单独使用的记账期间变式. 记账期间变式独立于会计年度变 ...
- opencv-python 图像基础处理(三)
腐蚀操作 #腐蚀操作 import cv2 import numpy as np img=cv2.imread("d:/ke.png") kernel = np.ones((3,3 ...
- java使用POI实现Excel批量导入数据
1.准备工作 1.1 创建模板表头与数据库表字段一一对应,示例如下 1.2将模板放入项目中,如下图所示: 2.前端页面 2.1 使用超链接提供模板下载地址 <html lang="zh ...
- [20191112]oracle共享连接模式端口.txt
[20191112]oracle共享连接模式端口.txt --//如果使用共享服务模式,你可以发现每次重启数据库对应的端口号会发生变化.# netstat -tunlp | egrep "A ...
- Python 3 线程模型,进程模型记录
最近需要使用 python3 多线程处理大型数据,顺道探究了一下,python3 的线程模型的情况,下面进行简要记录: 多线程运行的优点: 使用线程可以把程序中占用时间较长的任务放到后台去处理: 用户 ...