微前端遇到的样式问题：Event 对象中的clientX, pageX

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量101 收藏 1
点赞数 2
分类专栏： JS 运维相关 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongnihao/article/details/128904116
版权

问题描述：本地环境调试时候获取鼠标的坐标位置，生产环境使用微前端，分别在顶部和左部添加了导航（相当于两个div），导致线上环境的鼠标坐标获取错误，多出来的距离是导航的宽高。

看图理解其用法:

 

 

 暂时尚未解决微前端的中的此类问题，此博客待补充

董厂长
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
clientX和clientY属性需要注意的地方
weixin_30240349的博客
06-08 264
clientX和clientY为可视区鼠标的位置。 1. 随鼠标移动的div块[runjs] 当document有多个页面时，会出现问题。[runjs] 2. 解决方案：scrollTop, scrollLeft 需要注意scrollTop/scrollLeft的兼容性获取； scrollTop = document.documentElement.scrollTop || ...
event.X和event.clientX的区别分析
12-12
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 ...
js Event对象的5种坐标
12-07
在不同的浏览器中，Event对象提供的坐标属性不尽相同，这给开发者带来了兼容性问题。本文将详细阐述JavaScript Event对象中的五种坐标属性，以及它们在不同浏览器中的表现。 首先，我们来看五种主要的坐标属性： 1...
javascript Event对象详解及使用示例
12-08
JavaScript中的Event对象是处理事件的核心，它包含了与事件相关的各种信息，如事件源、按键状态、鼠标位置等。Event对象是在事件发生时由浏览器自动创建的，它在事件发生期间有效，之后会被销毁。理解并熟练运用...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 272
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 872
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 665
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 210
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 940
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
style-components使用手册
m0_62323931的博客
07-17 1126
div><MyButton $primary $color="black">按钮</MyButton></div>
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 500
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 242
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
Spring Cloud 配置教程
MAMA6681的博客
07-17 605
Spring Cloud 是一个开源项目，它提供了一套构建分布式系统和服务的工具，基于 Spring Boot，旨在简化云应用的开发、部署和管理。Spring Cloud 支持微服务架构，包括服务发现、配置管理、熔断、智能路由、微代理、控制总线、一次性令牌、全局锁、领导选举、分布式会话、集群状态等。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 1218
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
web前端 React 框架面试200题（三）
柯晓楠
07-21 422
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
VUE项目中使用crypto.getRandomValues代替Math.Random
07-18 37
由于 Math.random() 的底层算法是公开的（xorshift128+ 算法），V8 源码可见，因此，是可以使用其他语言模拟的，这就导致，如果攻击者知道了当前随机生成器的状态，那就可以知道缓存中的所有随机数，那就很容易匹配与破解。为了保证足够的性能，Math.random()随机数并不是实时生成的，而是直接生成一组随机数（64个），并放在缓存中，当这一组随机数取完之后再重新生成一批，放在缓存中。crypto这个对象在目前的浏览器中大多都默认加载了，所以可以使用公共函数方式来引用和使用。
javaScrip的学习（一）
weixin_65450681的博客
07-19 1268
这篇文章让我们简单来了解一下js，那么什么是js?JavaScript（简称JS）是一种高级编程语言，主要用于为网页添加交互功能。它可以嵌入到HTML页面中，通过对DOM（文档对象模型）的操作来实现动态效果和用户交互。JavaScript由Netscape公司的Brendan Eich于1995年创造，最初是为了增强HTML页面的功能性。随着时间的推移，JavaScript逐渐演变成一种通用的编程语言，可以在浏览器以外的环境中运行，例如服务器端的Node.js。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 325
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
offsetX,clientX,pageX,offsetLeft
05-13
假设有一个 div 元素，它的 offsetLeft 为 100px，当鼠标在它内部发生了 click 事件时，offsetX 就表示鼠标相对于这个 div 左侧边框的像素距离，clientX 则表示鼠标相对于浏览器窗口左侧的像素距离，pageX 则表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

董厂长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值