鼠標事件 | mouseover mouseout / mouseenter mouseleave

父級元素添加鼠標事件  子元素綁定點擊事件

<div @mouseenter="actioveCollection = index" @mouseleave ="actioveCollection = false">
    <i class="el-icon-star-off" v-if="!isCollection && actioveCollection === index" @click="addFastInstruction(item)"></i>
</div>

鼠標事件會影響子元素的點擊事件

so~

調用子元素方法時阻止冒泡即可 （event.stopPropagation();）

addFastInstruction(fastInstruction) {
    event.stopPropagation();
    // ...
    // 要執行的動作
},

但是！

mouseover mouseout使用阻止冒泡後不生效

mouseenter  mouseleave可以