首页 > 其他分享 >js中e.clientX e.pageX e.offsetX e.screenX之间的区别

js中e.clientX e.pageX e.offsetX e.screenX之间的区别

时间:2023-04-04 16:59:33浏览次数:35  
标签:clientX offsetX js 事件 坐标 IE event 属性

 

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

 

 

标签:clientX,offsetX,js,事件,坐标,IE,event,属性
From: https://www.cnblogs.com/itshijieku/p/17286946.html

相关文章

  • Win7安装node.js
    问题win7直接安装node.js官网的最新版安装不成功,是因为最新版的版本高,不支持win7,只支持win8以上。解决安装低版本的node.js,我选的是12.22.12版本,然后为其配置环境变量即可。如果需要npm,你只需要下载一个版本,解压后将除node之外的所有文件放到你安装好的目录下即可。运行在cm......
  • NestJS 拦截器 和 RxJs
    为什么要介绍RxJs因为在Nestjs已经内置了RxJs无需安装并且Nestjs也会有一些基于Rxjs提供的APIRxJs是什么RxJs使用的是观察者模式,用来编写异步队列和事件处理。Observable可观察的物件Subscription监听ObservableOperators纯函数可以处理管道的数据如mapfil......
  • js实现拖拽功能(拖拽排序)
    <template><transition-groupclass="container"name="sort"><divclass="drag-item"v-for="(v,i)indragArray":key="i":draggable="true"@dragstart="dr......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • js实现文字左右轮播
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.textDiv{position:relative;......
  • 如何编写高质量的 JS 函数(2) -- 命名/注释/鲁棒篇
    vivo互联网技术微信公众号 作者:杨昆上篇《如何编写高质量的JS函数(1)--敲山震虎篇》介绍了函数的执行机制,此篇将会从函数的命名、注释和鲁棒性方面,阐述如何编写高质量的JS函数。(一)函数命名一、目前前端的函数命名存在什么问题从上图可以知道,命名和缓存是计算机科学中的......
  • Wiki.js配置LDAP认证
    安装好wikijs之后,可以进行进一步的详细配置.这里介绍LDAP认证的配置.在管理->身份验证->添加策略->选择LDAP/AD,如下:接下来进行详细配置:显示名称:按需修改是否启用:是LDAPURL:格式为:ldap://serverhost:389orldaps://serverhost:636Admin......
  • Wiki.js配置LDAP认证
    安装好wikijs之后,可以进行进一步的详细配置.这里介绍LDAP认证的配置.在管理->身份验证->添加策略->选择LDAP/AD,如下:接下来进行详细配置:显示名称:按需修改是否启用:是LDAPURL:格式为:ldap://serverhost:389orldaps://serverhost:636Admin......
  • Three.js 进阶之旅:全景漫游-初阶移动相机版
    Three.js进阶之旅:全景漫游-初阶移动相机版 声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交......
  • 老代码考古,seajs为什么能够和CMD一样同步模式的方式使用require()方法
    我们知道在服务端的node可以同步block的方式加载别的js库文件,在服务端使用会block的require()函数来加载,就是所谓的CMD、CommonJS规范。而在浏览器端里的js则因为网络延迟等各种因素,不能使用同步block方式加载js库,而是异步回调callback加载的方式,也就是所谓的AMD模块规范。那么......