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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页