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