vue3+ts一个按钮同时配置鼠标长按事件和点击事件

看到我请叫我铁锤

已于 2023-12-02 14:56:13 修改

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript typescript

于 2023-12-02 14:53:18 首次发布

本文链接：https://blog.csdn.net/wtd183833501176/article/details/134752177

版权

1.思路：

鼠标长按事件就是监听鼠标按下和抬起，对鼠标按下事件做监听时间，时间到达一定的时间段，就为长按事件。

2.需求：

当鼠标长按的时候，下发长按事件，当鼠标抬起的时候，下发停止事件，当点击按钮的时候，下发点动事件。且点动事件不需要下发停止事件。

3.html代码：

<template>
 <el-button class="caret-left" @mousedown="handleMouseDown()" @mouseup="handleMouseUp()"  @click="click()">
 </el-button >
</template>

4.js代码：

<script lang="ts" setup>
import { reactive, ref } from 'vue';
let timer = ref(null) as any;
const isPressing = ref(false)
const longPressTimeout = ref()
const handleMouseDown = () => {
    // 当鼠标按下时，设置一个定时器，在一定时间内判断是否触发了长按事件
    longPressTimeout.value = setTimeout(() => {
        isPressing.value = false
        if (isPressing.value == false) {
            // 在这里可以执行长按事件的相关逻辑
           
        }
    }, 800); // 设置长按时间阈值，单位为毫秒
    isPressing.value = true
}
const handleMouseUp = () => {

    // 当鼠标抬起时，清除定时器，以避免触发点击事件
    clearPressingState();

    if (isPressing.value == true) {
       
        // 在这里可以执行鼠标抬起事件由点击触发时的逻辑
      } else if(isPressing.value == false){
        
        // 在这里可以执行鼠标抬起事件由长按触发时的逻辑
   stop()

      }

}
const clearPressingState = () => {
    // 清除按下状态和定时器
    clearTimeout(longPressTimeout.value);
}
//停止事件函数
const stop = () => {
   //你自己的逻辑
}
//点击事件函数
const click =()=>{
//你自己的点击事件逻辑
}
</script>