JS：避免鼠标事件太灵敏

最新推荐文章于 2022-08-04 14:12:19 发布

彭世瑜

最新推荐文章于 2022-08-04 14:12:19 发布

阅读量1.2k

点赞数 1

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/107786584

版权

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>