JS:避免鼠标事件太灵敏

简介: 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>
相关文章
|
4月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
44 1
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
47 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
5月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
114 7
|
7月前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状
|
7月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
62 0
|
JavaScript 前端开发
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
191 0
js鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合。
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
162 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
|
JavaScript 容器
js鼠标事件大全
js鼠标事件大全
119 0