点击事件的坐标计算(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 实际向界面注入 ...
随机推荐
- Redis入门(三)-Redis的安装及操作key的命令介绍
前两节对Redis做了一些详细的介绍,那么接下来开始我们就正式进入Redis的学习阶段. 安装Redis Windows下安装redis非常方便, 下载压缩包解压即可使用. 链接:https://pa ...
- SPARQL入门(一)SPARQL简介与简单使用
知识图谱(Knowledge Graph)是当前互联网最炙手可热的技术之一,它的典型应用场景就是搜索引擎,比如Google搜索,百度搜索.我们在百度搜索中输入问题"中国银行的总部在哪&q ...
- InfluxDB从原理到实战 - 一篇文章搞懂InfluxDB时区
0x00 简介 InfluxDB默认以UTC时间存储并返回时间戳,当接收到一个时序数据记录时,InfluxDB将时间戳从本地时区时间转换为UTC时间并存储,查询时,InfluxDB返回的时间戳对 ...
- 创建线程之三:实现Callable接口
通过Callable和Future创建线程 i. 创建Callable接口的实现类,并实现call方法,该call方法将作为线程执行体,并且有返回值,可以抛出异常. ii. 创建Callable实现类 ...
- 结对编程项目复盘:带UI的小初高数学学习软件
实现个人项目时,由于我当时的Java GUI编程基础还比较薄弱,所以我选择通过命令行实现,并将编程开发的重点放到了算法效率上去.没能设计出用户体验更佳的UI成为了我在个人项目阶段最大的遗憾. 在这次结 ...
- 用html,CSS 写一个静态的博客网页
<!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...
- Vulnhub DC-1靶机渗透学习
前言 之前听说过这个叫Vulnhub DC-1的靶机,所以想拿来玩玩学习,结果整个过程都是看着别人的writeup走下来的,学艺不精,不过这个过程也认识到,学会了很多东西. 所以才想写点东西,记录一下 ...
- 单片机固件烧录器 Firmware Writer Android APP
GitHub地址 :https://github.com/WallBreakerX/mcu_firmware_writing_via_androidphone 用途 可在安卓手机上实现向单片机的h ...
- 别不信!servlet获取到的参数值,也许完全出乎你的意料!
先贴出来简单得不能再简单的demo页面效果: 如下是spring mvc的Controller: @RequestMapping("mytest") @Controller pub ...
- CSS3的nth-child() 选择器
CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...