每每看到event.client、event.screen与event.offset这几个,头都大了,今天又碰到了,特来总结下。

  1、event.screenX与event.screenY。

  首先,event.screenX是鼠标相对于用户显示器屏幕左上角的X坐标。

  而event.screenY则是鼠标相对于用户显示器屏幕左上角的Y坐标。

  在标准事件和IE事件中都定义了这2个属性

  

  2、event.clientX与event.clientY。

  event.clientX是鼠标相对于浏览器窗口可视区域的X坐标(窗口坐标),可视区域不包括工具栏和滚动条。

  event.clientY是鼠标相对于浏览器窗口可视区域的Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。

  3、event.offsetX与event.offsetY

  offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

  offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

  

  这样说,感觉还是有点难以理解,因此这里用图片来说明:

        

  总结:screen是相对于屏幕而言的,而client则是相对于文档而言的,而offset则是相对于父容器而言的。

浅谈event.client、event.screen与event.offset的更多相关文章

  1. 浅谈c#中的delegate和event了

    一.开篇忏悔 对自己最拿手的编程语言C#,我想对你说声对不起,因为我到现在为止才明白c#中的delegate和event是怎么用的,惭愧那.好了,那就趁着阳光明媚的早晨简单来谈谈delegate和ev ...

  2. salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇

    上一篇介绍了Aura Framework中 Component类的部分方法,本篇将要介绍Event常用的方法. 1. setParam (String key , Object value):设置事件 ...

  3. [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

    [DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法   网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...

  4. 浅谈Android系统进程间通信(IPC)机制Binder中的Server和Client获得Service Manager接口之路

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6627260 在前面一篇文章浅谈Service ...

  5. 浅谈IM软件client的断线重连、心跳和长在线

    版权声明:原创文章,未经博主同意禁止转载.欢迎点击头像上方"郭晓东的专栏"查看专栏 https://blog.csdn.net/hherima/article/details/27 ...

  6. FAQ:Domain Event 和 C# 中的 Event 有啥区别?

    问: Domain Event 和 C# 中的 Event 有啥区别? 答: C# 中的 Event,事件.监听者列表和事件发布器是由一个类型承担,事件源和监听者之间的生命周期耦合在一起,C# 帮你提 ...

  7. Event Handling Guide for iOS--(三)---Event Delivery: The Responder Chain

    Event Delivery: The Responder Chain 事件传递:响应链 When you design your app, it’s likely that you want to ...

  8. 浅谈ASP.NET的Postback

    说道ASP.NET的Postback,就得说Web Page的生命周期,但是Web Page的生命周期却不是三言两语就能够说得清楚的,所以在这里单纯站的编程的角度,撇开Web Page 的生命周期浅谈 ...

  9. Spring5.0源码学习系列之浅谈BeanFactory创建

    Spring5.0源码学习系列之浅谈BeanFactory创建过程 系列文章目录 提示:Spring源码学习专栏链接 @ 目录 系列文章目录 博客前言介绍 一.获取BeanFactory主流程 二.r ...

随机推荐

  1. javascript01

    手敲代码01 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. 学会C sharp计算机编程语言 轻松开发财务、统计软件

    就像人们用同一种语言才可以顺畅交流一样,语言是计算机编程的根本,是IT世界交流的工具.运用这些计算机语言,人们可以创造出一个美妙的世界.你点击某个网页或是安装一个应用程序软件,这简简单单动作的背后,就 ...

  3. 正则表达式与grep

    一.回溯引用 1.将页面中合法的标题找出来,使用回溯引用匹配 (需要使用 -E 或 -P 来扩展grep语法支持) 2.查找连续出现的单词 二.前后查找 (grep 只能使用 -P 选项) 1. 向前 ...

  4. 当你的电脑出现stop: 0X0000007B

    这几天可算是把我折腾惨了.先是linux系统无法进入图形化桌面,几经折腾,我把linux删除重装.怎知道,我在瘟都死下删除linux的分区,结果我的两个瘟都死分区也没了,哭了我去恢复数据,但是然并卵. ...

  5. sql sever分组查询和连接查询

    分组查询select 查询信息 from 表名where 条件group by 按照列分组(可多个 ,隔开)order by 排序方式(查询信息如果列名和聚合函数同时出现,要么在聚合函数中出现,要么就 ...

  6. SpiderMonkey js引擎的静态编译与使用

    原文出处: http://yaolixing.oltag.com/gns-8ABFFE2D-EB1E-44FA-9118-217ED7959536.html 几百KB的跨平台js引擎,是不是您心之所想 ...

  7. SQLServer LinkServer 链接服务器

    Linked Server简介 我们日常使用SQL Server数据库时,经常遇到需要在实例Instance01中跨实例访问Instance02中的数据.例如在做数据迁移时,如下语句: insert ...

  8. SpringMVC 控制器默认支持GET和POST两种方式

    在SpringMVC的controller中,@RequestMapping只写路径,不包含RequetMethod.GET和RequetMethod.POST,HttpServletRequest的 ...

  9. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  10. button的padding属性在i8下和chrome下表现不一致

    button的padding属性在i8下和chrome下表现不一致 在ie8下会撑破很多像素,撑破布局 padding: 10px 48px; padding: 1px 35px \0; /* pro ...