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中鼠标事件太灵敏怎么解决？