在React中监听鼠标点击事件,UI如下,左右有padding。
然后鼠标从左往右慢慢滑入HOMR再滑出。
UI代码:
事件绑定在外层父元素上。
事件触发顺序如下。
1 鼠标只碰触父元素padding区域,那么会触发父元素(后面事件都在父元素上)的onMouseEnter和onMouseOver
2 鼠标移动到子元素HOME上面
会执行onMouseOut和再次执行onMouseOver。
3 鼠标移出子元素,移动到父元素右边padding区域
4 鼠标移出父元素
结论:如果执行触发一次应该使用onMouseEnter和onMouseLeave。
一般来说,onMouseOver、onMouseOut一起使用,鼠标经过时自身触发事件,经过其子元素时也触发该事件,每经过一次子元素都触发该事件,属于不断触发;onmouseenter、onmouseleave:鼠标经过时自身或者其子元素都触发事件,但是只触发一次。
如果希望经过子元素和离开子元素改变状态,那么就使用onMouseOver、onMouseOut。
推广一下自己开发的微信小程序,有兴趣的朋友可以玩一玩