react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
更新時間：2022年08月08日 14:27:42 作者：前端常春藤
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素
react獲取到的事件缺少了部分一些屬性，和原生事件對象不同
如圖：
解決方法
事件中使用：
e.nativeEvent
這是一個比較坑的地方，應(yīng)該是react的事件對象沒有包含一些原生eventDom的屬性。
獲取offsetLeft，offsetTop值不準(zhǔn)的原因
遇坑總結(jié)
決定offsetLeft、offsetTop的唯一因素是當(dāng)前節(jié)點和offsetParent節(jié)點的偏移關(guān)系。
也就是說只與offsetParent有關(guān)，那么怎么確定一個元素的offsetParent呢？
一個元素的offsetParent可以是以下其中之一：
- 1.具有position屬性（除了static值以外，而position默認(rèn)值為static）的最近父元素；
- 2.最近的table，table cell父元素；
- 3.根節(jié)點元素；
- 4.設(shè)置了動畫transform:translate的最近父元素；
所以當(dāng)計算二個元素（已經(jīng)渲染到頁面）的相對距離時，遍歷所有二個元素之間的所有Parent元素offsetTop之和即可，二個元素之間的所有Parent與Child之間一定要確保是對應(yīng)的offsetParent。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了React實踐之Tree組件的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了關(guān)于react中列表渲染的局部刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react源碼層深入刨析babel解析jsx實現(xiàn)
同作為MVVM框架，React相比于Vue來講，上手更需要JavaScript功底深厚一些，本系列將閱讀React相關(guān)源碼，從jsx -> VDom -> RDOM等一些列的過程，將會在本系列中一一講解2022-10-10
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了react使用CSS實現(xiàn)react動畫功能,結(jié)合實例形式分析了react使用CSS實現(xiàn)react動畫功能具體步驟與實現(xiàn)方法,需要的朋友可以參考下2020-05-05
基于React的狀態(tài)管理實現(xiàn)一個簡單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡簡單單實現(xiàn)一個顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
react-redux及redux狀態(tài)管理工具使用詳解
Redux是為javascript應(yīng)用程序提供一個狀態(tài)管理工具集中的管理react中多個組件的狀態(tài)redux是專門作狀態(tài)管理的js庫（不是react插件庫可以用在其他js框架中例如vue，但是基本用在react中），這篇文章主要介紹了react-redux及redux狀態(tài)管理工具使用詳解,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了ReactJS中不同類型的狀態(tài)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12