JS：避免滑鼠事件太靈敏

vue檔案中的寫法

<template>
    <div @mouseenter="handleEnter"
        @mouseleave="handleLeave"></div>
</template>

<script>

export default {
    data() {
        return {
          tabVisible: false,
          t: null,
        };
    },
    
    methods: {
        handleEnter() {
          // 避免滑鼠事件太靈敏
          this.t = setTimeout(() => {
            this.tabVisible = true;
          }, 500);
        },
    
        handleLeave() {
          // 滑鼠移出時，馬上清除,避免閃爍
          clearTimeout(this.t);
          setTimeout(() => {
            this.tabVisible = false;
          }, 500);
        },
    }
}
</script>      

參考

jquery中滑鼠事件太靈敏怎麼解決？