React's mouseEvent doesn't have offsetX/offsetY

最新推荐文章于 2024-10-05 11:11:38 发布
转载 最新推荐文章于 2024-10-05 11:11:38 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c80f20cf265da2d8c7df65e
文章标签：

#javascript #ViewUI

本文探讨了在React中使用position:'absolute'的canvas实现画板功能时，如何正确获取鼠标点击的offsetX和offsetY坐标。作者在实践中发现，React封装的事件对象中并未直接暴露这两个属性，而是将它们隐藏在了nativeEvent属性下。文章详细解释了这一机制，并提供了具体的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react 的 offsetX/offsetY

  • 今天，要用一个position: 'absolute' 的canvas 实现一个画板 功能，打印一下onMouseDown(event),发现没找到 offsetX/offsetY，找了半天没找到，把react 的鼠标绑定事件看了遍也没找到，然后到 Stack Overflow ，才找到，国内的网站还是水呀~
  • 原来在mouseEvent下面还有一个nativeEvent

  • 而在nativeEvent下面

原来封装在了，e.nativeEvent 才是当前事件的 真正的数据分发是在nativeEvent里面

react 的事件机制？

  • react 的事件机制
react hock ant-design-pro中实现文件上传预览，图片转base64，base64转成文件并下载, 图片去水印，在图片上选择区域，裁剪，获取图片真实宽高
张音乐的博客
01-09 1971
案例截图 一、文件上传自定义上传方法 <Card title={"图片上传"} bordered={false} style={{ width: '80%', margin: '0 auto' }}> <Dragger name={"上传图片"} customRequest={uploadRequest} showUploadList..
10、使用Flex 4.5开发黑莓平板应用程序
最新发布
mmm90的博客
06-22 21
本文深入探讨了如何使用Flex 4.5框架开发黑莓平板应用程序，涵盖从项目创建到最终发布的全过程。内容包括配置应用权限、使用设备功能（如加速度计、GPS、相机）、文件系统操作、操作系统交互、原生QNX组件的使用以及性能优化和调试技巧。此外，还介绍了发布应用程序的步骤，并通过实际案例分析展示了如何将理论应用于实践。
react鼠标在当前元素的坐标offsetX,Y
皮蛋solo粥的博客
04-15 757
<div onMouseMove={rrr} className='right'> const rrr = (e:any)=>{ console.log(e.nativeEvent.offsetX) } 今天做一个img跟随鼠标在某一个元素里位移，在js和vue都能取到的offsetX,Y是undifine了，我人麻了，react真是特立独行让人乱到离谱，他把offset封装在了nativeEvent里面，害得我好一顿找， ...
解决FireFox的鼠标Event中没有offsetX,offsetY的办法
懒蜗牛
08-26 895
之前制作了一个html版的连连看，最近改成html5版的，遇到了如何获取当前点击图片的问题。 因为之前的连连看用的图片是一个个零碎的图片，放入一个固定大小的div中，然后设置图片统一向左浮动。通过js事件委托，当点击图片的时候，查找当前event的target，就能得到点击的图片。 但是改成html5之后，所有的图片都被画在一个canvas里，鼠标点击的时候只能获取到整个canvas ...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
ColdCoder的博客
06-15 1409
鼠标事件 MouseEvent
React-事件处理详解
明明的博客
03-21 2323
对于用户界面而言，展示只占整体设计因素的一半，另一半则是相应用户输入，即通过JavaScript处理用户产生的事件。 React通过将事件处理器绑定到组建上处理事件，事件触发的同时更新组建的内部状态，内部状态更新会触发组件的重绘。因此，如果视图层想要渲染出事件出发后的结果，它所要做的就是渲染函数中读取组件的内部状态。 一、绑定事件处理器 React处理事件本身和原生的JavaScript事件
【React】React Event事件处理
qq_37086980的博客
09-01 767
React事件处理 <button className = {styles.button} onClick = {(e) => { this.setState({ isOpen: !this.state.isOpen }); }} > 购物车2件 </button> 给any添加自动映射 tsconfig.json { "compilerOptions": { "noImplicitAny": false } } 添加事件处理函
react组件进阶之 事件原理
twinkle的博客
03-24 400
在前文中，我们初步了解了react 的事件的使用方式，并且只是了解到react 的语法和原生的语法很相似。但是真正的事件原理，其实是大不相同的。 React中的事件 这里的事件：React内置的DOM组件中的事件 1. 给document注册事件 2. 几乎所有的元素的事件处理，均在document的事件中处理 一些不冒泡的事件，是直接在元素上监听 一些document上面没有的事件，直接在元素上监听 3. 在document的事件处理，React会根据虚拟DOM树的完成事件函数的调用 4. R.
【解读 ahooks 源码系列】DOM篇（三）
xxxzzzqqq_的博客
03-16 414
【解读 ahooks 源码系列】DOM篇（一）【解读 ahooks 源码系列】DOM篇（二）本文主要解读源码实现。
【实战】从零开始打造一个低代码平台——6、组件坐标系
大愚若智的博客
10-05 1508
从零开始打造一个低代码平，介绍前端的几种坐标系，以及如何使用和转换
Three.js做了一个网页版的我的世界
Elvis Hu的博客
06-13 6835
笔者在前一阵子接触到Three.js后, 发现了它能为前端 3D 可视化 / 动画 / 游戏方向带来的无限可能, 正好最近在与朋友重温我的世界, 便有了用Three.js来仿制 MineCraft 的想法, 正好也可以通过一个有趣的项目来学习一下前端 3D 领域方块的放置 / 破坏选择不同的方块类型移动和碰撞检测随机的地形和树木生成无限的世界保存 / 读取游戏音效和背景音乐可调节的渲染距离和视野范围基本的 UI生成水更多的保存栏位手机支持玩法介绍也可以在。
React源码 - 事件系统 ( 一 )
weixin_41154070的博客
09-02 367
Event 接口表示在 DOM 中出现的事件，所有的事件接口名称都是以“Event”结尾的。UIEvent 是主要基于Event接口的接口列表 Event接口表示在 DOM 中出现的事件 属性 event.bubbles：返回一个布尔值,表明当前事件是否会向DOM树上层元素冒泡. event.cancelable： 表明该事件是否可以被取消，当事件被阻止之后，该事件就好像没有被触发一样。 event.cancelBubble: 在从事件处理程序返回之前将其值设置为true可阻止事件的传播。( 阻止冒泡 )
clientX offsetX pageX screenX
weixin_33898876的博客
04-28 182
2019独角兽企业重金招聘Python工程师标准>>> ...
dom元素、鼠标元素位置clientX、clientY、offsetX、offsetY、screenX、screenY、pageX、pageY
八佾舞于庭
11-15 6554
event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (可见区域) event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 （可见区域） event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 （触发事件的元素,ie,chrom...
react事件对象无法获取offsetLeft、offsetTop、X、Y等元素解决方法
量子前端的博客
05-26 1857
react获取到的事件缺少了部分一些属性，和原生事件对象不同，如图： * 解决方法 事件中使用： e.nativeEvent 这是一个比较坑的地方，应该是react的事件对象没有包含一些原生eventDom的属性。
React中获取元素位置
热门推荐
MichaelAn的博客
09-22 2万+
React框架使用虚拟DOM代替真实的DOM来优化性能，使用props和state进行属性传递。所以说在react中直接获取DOM元素的位置是不合理的（不利于性能）。那么我们可以使用下面的API： document.documentElement.getBoundingClientRect Syntax oRect = object.getBoundingClientRect() //...
react jsx事件获取event对象
黄彪博客
07-15 9576
文章参考 React学习–JSX与react事件 下面我根据使用难易的顺序做了下面三个例子 一、使用bind函数获取event对象 react事件参数的传递通过绑定来实现，在传递时，绑定的this在前，参数在后，在定义函数时，事件对象e要放在最后 /** * 删除列表中选中的行 * @param index 数组的索引 * @param e Event对象,使用bind方式绑定函......
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
cc的博客
01-13 1244
一张图轻松搞懂javascript event对象的 clientX,offsetX,screenX,pageX区别
offsetX、clientX、pageX等位置的计算
风火一回，一生不毁
06-01 5121
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的
移动端React弹窗组件实现，支持alert/confirm/loading
- **React Native 或 React：**根据项目需要选择React Native可以编译为原生移动应用，而React则主要关注Web应用。不过在Web应用中也可以使用一些移动端设计的React组件库。 - **React Portal：**在React中，Portal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值