iT邦幫忙

2

css 渲染結果無法預期

  • 分享至 

  • xImage

我利用 mouseenter mouseLeave 做了一個提示使用者目前有選取到此元素的功能
但當我快速的來回觸發 mouseenter mouseLeave 時,他渲染的結果就不如預期。

運行結果
https://ithelp.ithome.com.tw/upload/images/20200513/20124859OxnZZ1gpcX.jpg
mouseLeave 有正常運作,但卻有時正常,有時殘留在父或子元素上。

html模型
https://ithelp.ithome.com.tw/upload/images/20200513/20124859sPQg17yHUD.jpg
https://ithelp.ithome.com.tw/upload/images/20200513/20124859U87EXe9Ryk.jpg
https://ithelp.ithome.com.tw/upload/images/20200513/20124859hXbYObCHTs.jpg

我利用下面這段程式碼做這件事

// 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結構
https://ithelp.ithome.com.tw/upload/images/20200513/20124859muU3Sp8RDy.jpg

錯誤發生時即,進入是在父元素,離開時卻是子元素,或相反狀況。
https://ithelp.ithome.com.tw/upload/images/20200513/20124859r6uBSjLDN2.jpg
即下列這二種情況
https://ithelp.ithome.com.tw/upload/images/20200513/20124859ZjWhBtEf1M.jpg

我期望的狀況
https://ithelp.ithome.com.tw/upload/images/20200513/201248595p5eeq9ZrW.jpg
進出都應該是父元素

dragonH iT邦超人 5 級 ‧ 2020-05-13 11:33:12 檢舉
> e.target 為 最外層之 div

你確定?

把它印出來看
jokie7585 iT邦新手 5 級 ‧ 2020-05-13 11:42:02 檢舉
大大您好,我用下面的程式碼測試
``` javascript
handleOnEnter= (e) => {
e.target.setAttribute('style', "background-color:#a1a1a1")
console.log('over-hear-enter')
console.log('target: ' + e.target.getAttribute('class'))
}

handleOnLeave= (e) => {
e.target.removeAttribute('style')
console.log('over-hear-Leave')
console.log('target: ' + e.target.getAttribute('class'))
}
```
結果
```
over-hear-enter
target: WorkspaceModel-Sidebar-WS-List-Item
over-hear-Leave
target: WorkspaceModel-Sidebar-WS-List-Item
```
一個顯示單位的html結構
我更新在問題

看來是我用字不夠精準,應該說是包覆這個元素的外層,也就是,應該要顯示 background-color的元素
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 2020-05-13 12:08:57
最佳解答

codepen

卡個位

吃個飯

看更多先前的回應...收起先前的回應...
jokie7585 iT邦新手 5 級 ‧ 2020-05-13 12:11:58 檢舉

就是樣那樣QQ 感謝大大卡位

jokie7585 iT邦新手 5 級 ‧ 2020-05-13 12:50:52 檢舉

我比較好奇的是為什麼子元素沒有註冊事件為什麼會被影響到呢?我稍微查了一下所謂的冒泡捕捉也沒有頭緒

dragonH iT邦超人 5 級 ‧ 2020-05-13 13:22:36 檢舉

jokie7585

你是用 class component

不然你改用 e.currentTarget 看看

或者改用 variable 來控制

不過好奇沒看到你 child element 有綁 event

為啥會觸發呢

jokie7585 iT邦新手 5 級 ‧ 2020-05-13 13:43:01 檢舉

沒錯 我是用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.

這邊所說的topmostthe event listener attached
在我的例子內貌似是同一個?還是我對topmost有誤解?並不是div最外圍,而是context stack的最上層?如過是就合理了

dragonH iT邦超人 5 級 ‧ 2020-05-13 13:48:59 檢舉

這篇

這邊

可以參考看看

jokie7585 iT邦新手 5 級 ‧ 2020-05-13 17:42:20 檢舉

感謝大大哦~

2

我只想說,為何沒將:hover給放在眼裏啊?
人家css就已經有提供指向元件給你用了。
還要自已再那邊style幹啥呢?

還是只是拿來當練手?

看更多先前的回應...收起先前的回應...
jokie7585 iT邦新手 5 級 ‧ 2020-05-13 13:57:19 檢舉

回復星空大大~
小弟我也嘗試果許多css框架跟語法~
但是各種attribute傳來傳去 出錯除錯非常麻煩 因為基本知識不足
所以為了同時訓練自己對WebAPI的敏感度還有一些前端的common sense
所以就練練手~

這幾天確實有計畫要開始了解偽元素了~
感謝大大提醒!

jokie7585 iT邦新手 5 級 ‧ 2020-05-13 14:08:05 檢舉

另外大大說的不需要用到style,可以求一個簡單的範例嗎?
另外使用style直接操作與使用css指向元件效能上有差別嗎?
雖然跟我這個新手沒有太直接的關係ww

最好還是學習用css的class的模式。
就算要用js來做應用控管。也盡量不要使用style的方式。
除非真的不得已。(像我以前拿來做動的也是不得已得要用style控管。)

畢竟在css的繼承上,style永遠是最大的優先權。
用style處理,很容易陷入無法自由控管的地步。

jokie7585 iT邦新手 5 級 ‧ 2020-05-13 17:42:01 檢舉

原來如此 確實是這樣沒有錯
感謝大大提點

我要發表回答

立即登入回答