JS鼠标事件onMouseOver和onMouseOut的坑

在React中监听鼠标点击事件，UI如下，左右有padding。

然后鼠标从左往右慢慢滑入HOMR再滑出。

UI代码：

 事件绑定在外层父元素上。

事件触发顺序如下。

1 鼠标只碰触父元素padding区域，那么会触发父元素（后面事件都在父元素上）的onMouseEnter和onMouseOver

2 鼠标移动到子元素HOME上面

 会执行onMouseOut和再次执行onMouseOver。

3 鼠标移出子元素，移动到父元素右边padding区域

 4 鼠标移出父元素

 结论：如果执行触发一次应该使用onMouseEnter和onMouseLeave。

一般来说，onMouseOver、onMouseOut一起使用，鼠标经过时自身触发事件，经过其子元素时也触发该事件，每经过一次子元素都触发该事件，属于不断触发；onmouseenter、onmouseleave：鼠标经过时自身或者其子元素都触发事件，但是只触发一次。

如果希望经过子元素和离开子元素改变状态，那么就使用onMouseOver、onMouseOut。

推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩