关于 mouseout 事件频繁触发的问题

Question

要实现的功能：红线跟随鼠标水平移动（水平移动范围就是黑色框的宽度范围），当鼠标移出框外时红线消失。

我在黑框上绑定了 mouseout，但是鼠标在黑框内移动时，因为红线是跟着鼠标移动的嘛，所以鼠标时不时也会移到红线上，因此会在鼠标还在黑框内时频繁触发 mouseout 事件，请问这种情况该怎么解决？怎么才能在鼠标移出黑框时才触发 mouseout 事件？

红线和黑框在同一级，或者红线为黑框子元素时都各有什么解决方案？

Answer 1

1. 楼上说的事件 mouseleave 不会因为触发子节点导致多次触发 。（但是你说的同级是没办法实现的）
2. 红线设置 pointer-events: none;，就不会触发多余的事件了。
3. 通过鼠标位置和DOM元素位置去计算。

Answer 2

用mouseleave