结论:

1,X,Y的都是属于点击位置的,width、height、left、top都是属于DOM的。

2,涉及的所有位置只与documentDOM内部有关,与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) 各种排列组合别绕晕的更多相关文章

  1. android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)

    在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...

  2. Unity 3D物体的点击事件响应以及NGUI坐标和世界坐标的互相转换

    Unity 版本:4.5 NGUI版本:3.6.5 参考链接:http://game.ceeger.com/Script/Camera/Camera.ScreenPointToRay.html,Uni ...

  3. android 项目学习随笔十三(ListView实现ITEM点击事件,将已读状态持久化到本地)

    1.因为给LISTVIEW增加了两个头布局,所以在点击事件ITEM索引会增加2,比如原来第一条数据的索引应该为0,增加两个头布局后,它的索引变为        2,为了使LISTVIEW的ITEM在点 ...

  4. CoreText实现图文混排之点击事件-b

    CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UIT ...

  5. CoreText实现图文混排之点击事件

    今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...

  6. 关于iOS应用管理之九宫格的坐标计算以及与UIScrollView的结合

    关于九宫格的布局以及坐标的计算,对于大多数的iOS初学者甚至有一定能力的学者来说都是一大难题,在此写者通过自己的开发经验以及多次应用,把自己的所学所得分享给大家,就通过应用管理来进行浅谈一二.     ...

  7. JS怎样将拖拉事件与点击事件分离?

    帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...

  8. android的多次点击事件的实现(有源码)

    三次点击事件的原理图:数组的复制(android源码的调用): 下面就是第一步: 创建long数组,里面的数字代表点击的次数. 下面是主要代码实现: system.arraycopy();里面的参数描 ...

  9. [Android]通过adb shell input上报命令模拟屏幕点击事件【转】

    本文转载自:http://blog.csdn.net/yuanzihui/article/details/52871652 常用的 input上报命令: input text 1234 实际向界面注入 ...

随机推荐

  1. Redis入门(三)-Redis的安装及操作key的命令介绍

    前两节对Redis做了一些详细的介绍,那么接下来开始我们就正式进入Redis的学习阶段. 安装Redis Windows下安装redis非常方便, 下载压缩包解压即可使用. 链接:https://pa ...

  2. SPARQL入门(一)SPARQL简介与简单使用

      知识图谱(Knowledge Graph)是当前互联网最炙手可热的技术之一,它的典型应用场景就是搜索引擎,比如Google搜索,百度搜索.我们在百度搜索中输入问题"中国银行的总部在哪&q ...

  3. InfluxDB从原理到实战 - 一篇文章搞懂InfluxDB时区

    0x00 简介    InfluxDB默认以UTC时间存储并返回时间戳,当接收到一个时序数据记录时,InfluxDB将时间戳从本地时区时间转换为UTC时间并存储,查询时,InfluxDB返回的时间戳对 ...

  4. 创建线程之三:实现Callable接口

    通过Callable和Future创建线程 i. 创建Callable接口的实现类,并实现call方法,该call方法将作为线程执行体,并且有返回值,可以抛出异常. ii. 创建Callable实现类 ...

  5. 结对编程项目复盘:带UI的小初高数学学习软件

    实现个人项目时,由于我当时的Java GUI编程基础还比较薄弱,所以我选择通过命令行实现,并将编程开发的重点放到了算法效率上去.没能设计出用户体验更佳的UI成为了我在个人项目阶段最大的遗憾. 在这次结 ...

  6. 用html,CSS 写一个静态的博客网页

    <!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...

  7. Vulnhub DC-1靶机渗透学习

    前言 之前听说过这个叫Vulnhub DC-1的靶机,所以想拿来玩玩学习,结果整个过程都是看着别人的writeup走下来的,学艺不精,不过这个过程也认识到,学会了很多东西. 所以才想写点东西,记录一下 ...

  8. 单片机固件烧录器 Firmware Writer Android APP

    GitHub地址 :https://github.com/WallBreakerX/mcu_firmware_writing_via_androidphone ​ 用途 可在安卓手机上实现向单片机的h ...

  9. 别不信!servlet获取到的参数值,也许完全出乎你的意料!

    先贴出来简单得不能再简单的demo页面效果: 如下是spring mvc的Controller: @RequestMapping("mytest") @Controller pub ...

  10. CSS3的nth-child() 选择器

    CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...