vue鼠标悬停事件监听实现方法

目录
  • 前言
  • 情景描述
  • 解决方法
  • 总结

前言

开发框架为 vue2.x

情景描述

需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件。

比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示。

解决方法

我的思路中 涉及到了三个变量

data(){
  return {
    polling: null,
    timeCount: 0,
    judgeTimer: null,
  }
}

polling: 是 轮询的时候的一个计时器
timeCount: 是 判断鼠标是否移动的一个控制变量
judgeTimer:是 判断鼠标是否移动的一个计时器

只要鼠标进行了移动,那么 timeCount就会发生变化。
若是15秒内 timeCount没有发生变化,那么就说明此刻鼠标处于悬停状态,就可以进行运行悬停的事件

那么 对于鼠标移动 我们可以给元素绑定 mousemove事件

mouseMove() {
  clearTimeout(this.judgeTimer);
  clearInterval(this.polling);
  this.timer = null;
  this.polling = null;
  this.timeCount = ++this.timeCount % 100;
},

那么对于 timeCount 怎么知道是多久未发生变化呢?

我们可以在watch下对其进行监听

watch: {
  timeCount: {
    handler() {
      this.judgeTimer = null;
      this.polling = null;
      clearTimeout(this.judgeTimer);
      clearInterval(this.polling);
      this.judgeTimer = setTimeout(() => {
        this.play();
      }, delay);
    },
  },
},

至于我嘛的 play 函数 就是我们的具体业务部分了,在play函数内编写轮询的业务,使用 polling 作为计时器。

play() {
  clearInterval(this.polling);
  this.polling = setInterval(() => {
    // 具体业务代码
  }, delay);
},

总结

到此这篇关于vue鼠标悬停事件监听的文章就介绍到这了,更多相关vue鼠标悬停事件监听内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue鼠标悬停事件实例详解

    具体代码如下所述: v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dis

  • vue鼠标悬停事件监听实现方法

    目录 前言 情景描述 解决方法 总结 前言 开发框架为 vue2.x 情景描述 需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件. 比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示. 解决方法 我的思路中 涉及到了三个变量 data(){ return { polling: null, timeCount: 0, judgeTimer: null, } } polling: 是 轮询的时候的一个计时器timeCount: 是 判断鼠标是否移动的一个控制变量jud

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • C#自定义事件监听实现方法

    本文实例讲述了C#自定义事件监听实现方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ConsoleApp { /// <summary> /// 定义事件 /// </summary> class CustomEvent { /// <summary> /// 定义委托 /// &

  • 详谈Java中的事件监听机制

    鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动作发生在哪个组件上,那么该组件就是事件源对象 2.事件监听方法: addMouseListener(MouseListener ml) ;该方法主要用来捕获鼠标的释放,按下,点击,进入和离开的动作:捕获到相应的动作后,交由事件处理类(实现MouseListener接口)进行处理. addAction

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

  • vue各种事件监听实例(小结)

    计算属性的Get方法和Set方法 看代码说话: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> &l

  • Vue.JS入门教程之事件监听

    你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel: <div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <a v-on

随机推荐