Js中clientX/Y、offsetX/Y和screenX/Y之间区别

Js中client、offset和screen的区别

  • 前言
  • 图文解说
  • 实例代码解说

前言

本文主要讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。

图文解说

在这里插入图片描述
在上图中,有三个框,第一个为屏幕,第二个为浏览器大小,第三个为某个DOM元素。而点击事件属性中的screenX或Y就是距离屏幕左、上侧的距离,而clientX和clientY就是距离浏览器左、上侧的距离,子u后offsetX、offsetY就是跟点击时鼠标在哪个元素中,那么就计算跟这个元素的左、上侧距离。也就是下图所示。
在这里插入图片描述
在上图中,我们点击了这个正方形DOM元素,那么它的offsetX就是距离这个正方形元素左侧的距离,而offsetY就是距离正方形上侧的距离,它的clientX就是距离浏览器左侧的距离,clientY就是距离浏览器上侧的距离,它的screenX就是距离它整个屏幕左侧的距离,它的screenY就是距离它整个屏幕上侧的距离。

实例代码解说

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div style="width:200px;height:200px;border:1px solid gray;"></div><script>document.onmousedown=function(e){console.log("距离点击元素位置",e.offsetX,e.offsetY);console.log("距离浏览器位置",e.clientX,e.clientY)console.log("距离屏幕位置",e.screenX,e.screenY);}</script></body>
</html>

在这里插入图片描述
在上述代码中我们可以看到,我们HTML结构中只有一个id为circle的div,并且給它设置了宽高和边框,同时在js中我们添加了鼠标的点击事件onmousedown,那这个点击事件并没有根据某个元素进行绑定,而是绑定在了整个浏览器中,作为一个鼠标点击事件的监听,当我们点击某个元素内值时候,打印对应的clientX/clientY、offsetX/offsetY、screenX/screenY。会发现,距离点击元素位置和距离浏览器位置永远都差大于等于8,那是因为浏览器默认内外边距为8px,所以说,这也恰恰证明了,在图文解说中说的是正确的。
注:当我们鼠标点击事件中所在区域没有元素时,默认offsetX和offsetY也为浏览器的距离

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/158766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2021集创赛】Diligent杯一等奖:基于Cortex-M3软核的智能识别称量平台

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 杯赛题目&#xff1a;Diligent杯&#xff1a;基于FPGA开源软核的硬件加速智能平台 参赛组别&#xff1a;A组 设计任务&#xff1a; 利用业界主流软核处理器(仅限于Cortex-M系列及 RISC-V系…

使用hping3和wrk模拟泛洪

一、hping3 1、syn随机ip泛洪 hping3 --flood -S --rand-source -p 端口 目标ip hping3 -c 10000 -d 120 -S -p 80 --flood --rand-source 192.168.112.130​说明&#xff1a; -c 100000 packets 发送的数量 -d 120 packet的大小 -S 只发送syn packets -p 80 目标端口&am…

腾讯云服务器99元一年?假的,阿里云是99元

腾讯云服务器99元一年是真的吗&#xff1f;假的&#xff0c;不用99元&#xff0c;只要88元即可购买一台2核2G3M带宽的轻量应用服务器&#xff0c;99元太多了&#xff0c;88元就够了&#xff0c;腾讯云百科活动 txybk.com/go/txy 活动打开如下图&#xff1a; 腾讯云服务器价格 腾…

Oracle(2-5)Usage and Configuration of the Oracle Shared Server

文章目录 一、基础知识1、 Server Configurations服务器配置2、Dedicated server process专用服务器进程3、Oracle Shared ServerOracle共享服务器4、Benefits of Shared Server 共享服务器的优点5、Processing a Request 处理请求6、Configuring Shared Server 配置共享服务器…

BW4HANA 从头到脚 概念详解 ---- 持续更新中

1. 理解BW4HANA是干嘛的 好歹干了这么久的活了&#xff0c;从当初的啥也不懂到现在感觉啥都知道点&#xff0c;虽然知道的有限&#xff0c;但是也不是小白。渐渐的也知道了SAP开发的一些逻辑。本来咱是想当个BW的大牛的。但是现在感觉这条船要沉了是怎么回事。个人才稍微摸到点…

网站监控的重要性

网站监控的重要性体现在以下几个方面&#xff1a; 1.提高安全性&#xff1a;监控可以帮助识别和预防安全漏洞、攻击和恶意行为。它可以监测异常的流量、恶意软件、未经授权的访问等&#xff0c;并向管理员发送警报。通过及时发现和应对潜在的安全威胁&#xff0c;网站监控有助于…

【SpringBoot】通过profiles设置环境

效果图&#xff0c;通过profiles设置环境 在父级pom.xml中添加配置 <profiles><profile><id>dev</id><properties><application.environment>dev</application.environment></properties><activation><activeByDefau…

jenkins springCloud项目优雅下线

文章目录 场景解决下线请求效果如图贴一个可用的部署脚本 场景 在 Spring Cloud 项目的微服务实例关闭时&#xff0c;需要首先从注册中心设置为下线&#xff0c;避免该服务的消费者继续请求该服务实例&#xff0c;导致请求失败如果我们在服务实例从注册中心取消注册后&#xff…

什么是强化学习

1.1 强化学习概述 强化学习&#xff08;reinforcement learning&#xff0c;RL&#xff09; 讨论的问题是智能体&#xff08;agent&#xff09;怎么在复杂、不确定的环境&#xff08;environment&#xff09;中最大化它能获得的奖励。如图 1.1 所示&#xff0c;强化学习由两部…

【市场解读】掌握MT4外汇交易的核心技巧

近年来&#xff0c;随着全球经济一体化的加速和金融市场的日益繁荣&#xff0c;外汇交易作为一种高流动性和高风险的资产交易方式&#xff0c;备受投资者青睐。而MT4外汇交易平台作为全球最常用的外汇交易平台之一&#xff0c;更是受到了广泛的关注和使用。那么&#xff0c;如何…

HashMap知识点总结

文章目录 HashMapConcurrentHashMap线程安全问题 HashMap 1、null作为key只能有一个&#xff0c;作为value可以有多个 2、容量&#xff1a; 1.7&#xff1a;默认161.8&#xff1a;初始化并未指定容量大小&#xff0c;第一次put才初始化容量 3、负载因子 默认0.75&#xff0…

安装docker-compose

安装docker-compose github地址 https://github.com/docker/compose/releases/ 下载地址 https://github.com/docker/compose/releases/download/v2.23.0/docker-compose-linux-x86_64 安装 wget https://github.com/docker/compose/releases/download/v2.23.0/docker-co…

NOSQL----redis的安装和基础命令

redis是什么 1.redis-------非关系型数据库 redis是非关系数据库的一种&#xff0c;也称为缓存型数据库。 非关系型数据库和关系型数据库 1.关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;记录方式是行和列&#xff08;列&#xff1a;声明对象&#xff0c;行&am…

探索分销小程序商城开发和搭建

在数字化时代&#xff0c;小程序已经成为了企业营销的重要工具。其中&#xff0c;分销小程序商城以其独特的优势&#xff0c;吸引了众多企业的关注。下面给大家介绍如何开发分销小程序商城&#xff0c;以及小程序分销搭建的流程。 首先&#xff0c;我们需要明确什么是分销小程…

中国信息通信研究院发布《中国金融科技生态白皮书》(2023)

加gzh“大数据食铁兽”&#xff0c;回复“20231122”&#xff0c;获取材料完整版 导读 本白皮书是中国信息通信研究院连续第六年针对金融科技领域的跟踪研究成果&#xff0c;聚焦过去一年来国内外金融科技领域新的发展情况&#xff0c;重点分析了中国金融科技产业、技术、市…

移远EC600U-CN开发板 11.22

主界面功能按键: 1.打开端口按钮: uart1 UART(UART.UART2,9600, 8, parity, 1, 0) #构造串口对象 def OpenEvent(evt):global uart1openBtn evt.get_code()if openBtn lv.EVENT.CLICKED:if labelOpenBtn.get_text() "打开端口":uart1 UART(UART.UART2,int(b…

七牛云产品使用介绍之CDN篇

上一篇介绍了七牛云的Kodo对象存储&#xff0c;并用Java SDK实现将本地文件上传到bucekt&#xff0c;接下来是对CDN产品的介绍 CDN&#xff08;内容分发网络&#xff09;&#xff1a;通过多级缓存实现对Kodo中的资源或者自己网站的资源的加速访问&#xff0c;让你的系统更快更强…

深入了解Linux中的scp命令及高级用法

Linux操作系统中&#xff0c;scp&#xff08;Secure Copy Protocol&#xff09;命令是一个用于在本地系统和远程系统之间安全复制文件的强大工具。通过基于SSH的加密通信&#xff0c;scp提供了安全的文件传输方式。在本文中&#xff0c;我们将深入介绍scp命令的基本语法以及一些…

进度条、git常见指令以及gdb的常用指令

进度条 进度条是笔者所接触的第一个更加贴近于系统的小玩意&#xff0c;主要是要理解回车、换行、换行回车和缓冲区的概念。 回车是回到当前行的第一个光标位置&#xff0c;换行是换到下一行但是光标还在原来的位置&#xff0c;换行回车就是键盘上面的回车键是回到下一行的第…

WebAssembly照亮了 Web端软件的未来

WebAssembly的发展历程相对较短&#xff0c;但影响深远。WebAssembly 于 2015 年首次发布&#xff0c;先驱技术是来自Mozilla的asm.js和Google Native Client&#xff0c;最初的实现是基于asm.js的功能集。自2017年3月由WebAssembly创造的MVP的预览版发布以来&#xff0c;WebAs…