vue鼠标悬停事件监听

Posted 2023-03-29 chenyu-max

前言

开发框架为 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的鼠标点击事件和悬停事件

vue没有悬停事件，可以使用鼠标进入事件和鼠标离开事件的组合来代替。

<template>
    <div>
        <table style="width: 320px; height: 320px; border: 1px solid #999999;" rules="all" @click="onClick">
            <tr v-for="rowN in 4">
                <td v-for="colN in 4" style="text-align: center;" @mouseenter="onEnterTd" @mouseleave="onLeaveTd">rowN
                    + "-" + colN</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default 
        data() 
            return 
            
        ,
        watch: 
        ,
        mounted() 
        ,
        methods: 
            //鼠标点击的事件。
            onClick(e) 
                // 相关知识点：
                // e.target 是你当前点击的元素。 
                // e.currentTarget 是你绑定事件的元素。
                // 举个例子 假如onClick是绑定在table元素上 那么 e.target是你当前点击的td元素 而e.currentTarget是table元素。
                // getBoundingClientRect()方法返回的是一个矩形对象 它包含四个属性（left、top、right和bottom） 分别表示该元素四边与页面上边和左边的距离。
                var rect = e.currentTarget.getBoundingClientRect();
                console.log("track_onClick_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
            ,
            //鼠标进入的事件。
            onEnterTd(e) 
                var rect = e.currentTarget.getBoundingClientRect();
                console.log("track_onEnterTd_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
            ,
            //鼠标离开的事件。
            onLeaveTd(e) 
                var rect = e.currentTarget.getBoundingClientRect();
                console.log("track_onLeaveTd_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
            
        
    
</script>
<style>
</style>