我利用 mouseenter
mouseLeave
做了一個提示使用者目前有選取到此元素的功能
但當我快速的來回觸發 mouseenter
mouseLeave
時,他渲染的結果就不如預期。
運行結果
mouseLeave
有正常運作,但卻有時正常,有時殘留在父或子元素上。
html模型
我利用下面這段程式碼做這件事
// e.target 為 最外層之 div
handleOnEnter= (e) => {
e.target.setAttribute('style', "background-color:#a1a1a1")
console.log('overhear-over')
}
handleOnLeave= (e) => {
e.target.removeAttribute('style')
console.log('overhear-Leave')
}
小弟是web新手,不知道這是否是效能太差導致選染不夠快?我有試著增加margin padding都沒有效果。
框架:react
針對樓下討論之補充
補充 一個要如此運作的元素的html結構
錯誤發生時即,進入是在父元素,離開時卻是子元素,或相反狀況。
即下列這二種情況
我期望的狀況
進出都應該是父元素
就是樣那樣QQ 感謝大大卡位
我比較好奇的是為什麼子元素沒有註冊事件為什麼會被影響到呢?我稍微查了一下所謂的冒泡
跟捕捉
也沒有頭緒
你是用 class component
嗎
不然你改用 e.currentTarget
看看
或者改用 variable 來控制
不過好奇沒看到你 child element 有綁 event
為啥會觸發呢
沒錯 我是用class component
用了currentTarget
確實可以了(天阿 也太神奇了...)
e.currentTarget | e.target 這兩這的運作有什麼差別呢?
我看文檔敘述:
target : The event target (the topmost target in the DOM tree).
currentTarget : The node that had the event listener attached.
這邊所說的topmost
跟 the event listener attached
在我的例子內貌似是同一個?還是我對topmost有誤解?並不是div最外圍,而是context stack的最上層?如過是就合理了
感謝大大哦~
我只想說,為何沒將:hover給放在眼裏啊?
人家css就已經有提供指向元件給你用了。
還要自已再那邊style幹啥呢?
還是只是拿來當練手?
回復星空大大~
小弟我也嘗試果許多css框架跟語法~
但是各種attribute傳來傳去 出錯除錯非常麻煩 因為基本知識不足
所以為了同時訓練自己對WebAPI的敏感度還有一些前端的common sense
所以就練練手~
這幾天確實有計畫要開始了解偽元素了~
感謝大大提醒!