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>

参考

jquery中鼠标事件太灵敏怎么解决?

相关文章
|
7月前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
8月前
|
JavaScript 前端开发
js的事件冒泡
js的事件冒泡
42 1
|
8月前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
48 11
|
8月前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状
|
8月前
|
JavaScript
js中的事件冒泡
js中的事件冒泡
66 0
|
8月前
|
JavaScript
JS绑定事件的几种方法
JS绑定事件的几种方法
52 0
|
JavaScript 前端开发
js的键盘事件
js的键盘事件
60 0
|
JavaScript
详解JS监听事件
详解JS监听事件
147 0
|
JavaScript 前端开发
JS的键盘事件
JS的键盘事件
101 0

热门文章

最新文章

下一篇
开通oss服务