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。

JS鼠标事件onMouseOver和onMouseOut的坑相关推荐

JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup详解 1.事件属性如下: 2.下面用一段代码来了解和体验这些鼠标事件的用法: & ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
JS鼠标事件实现动效
1 JS鼠标事件 click鼠标点击事件事件对象.onclick=function() {} mousedown / mouseup 鼠标按下/松开事件事件对象.onmousedown =func ...
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来鼠标指针位于一个元素上方,然后用户将其移入另一 ...
鼠标事件 onmouseover、onmouseenter、onmouseleave和onmouseout
触发时机: onmouseout:鼠标滑出 onmouseover:鼠标滑过(在表面经过即可) onmouseenter:鼠标进入(进入到里面) onmouseleave:鼠标离开 onmouseov ...
JS鼠标事件（非常详细）
这里写目录标题一. 常用到的鼠标事件鼠标点击鼠标移动鼠标经过鼠标来源鼠标定位鼠标按键一. 常用到的鼠标事件在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠 ...
c语言鼠标事件的详解,JS鼠标事件（非常详细）
在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型事件类型说明 click 单击鼠标左键时发生,如果右键也按下则不会发生.当用 ...
JS 鼠标事件与键盘事件
一.鼠标事件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 o ...
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
鼠标事件 onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.. on ...

JS鼠标事件onMouseOver和onMouseOut的坑

JS鼠标事件onMouseOver和onMouseOut的坑相关推荐

最新文章

热门文章