为什么mouseenter和mouseleave导致标签频繁闪烁

Question

问题：使用mouseenter和mouseleave控制元素在被接触和被离开时显示的不同

代码：

================================== html =====================================
<span v-if="vehicle.isHover" v-on:mouseleave="locationMouseleave(index)" class="lat-lng">
    {{vehicle.latitude | cut}}, {{vehicle.longitude | cut}}
</span>
<span v-else v-on:mouseenter="locationMouseenter(index)">
    {{vehicle.location}}
</span>

================================== js ======================================
locationMouseenter(index) {
    this.vehicles[index].isHover = true;
},
locationMouseleave(index) {
    this.vehicles[index].isHover = false;
}

================================== css ======================================
span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

默认情况下，显示汽车的地址时，当鼠标接触时显示该地址处的经纬度。问题是当接触地址的右侧时，出现闪烁。

解决方案：

首先分析为什么会这样，不要瞎碰。当触碰地址区右侧异常区时，首先触发事件，导致地址区隐藏，经纬区显示，但是由于鼠标此时处在经纬区之外，所以会继续触发，导致经纬区隐藏，地址区显示。如此反复就会出现闪烁。解决方案是将地址区和经纬区设置为等长的。就可以。