vue实现按钮的长按功能
时间：2022-02-27 09:21:07 | 栏目：vue | 点击：次
先给大家介绍下vue实现按钮的长按功能，效果图如下：
实现效果图：
实现思路：
给需要操作的 dom 元素添加touchstart(点击开始)、touchend(点击结束)、touchmove(手指移动)事件
在使用touchstart(点击开始)事件的时候设置定时器，在指定时间内如果不做其他操作就视为 长按事件，执行 长按事件 的同时需要设定当前不是 单击事件，以防止touchend(点击结束)执行的时候同时出现 长按事件 和 单击事件
在 touchend(点击结束)里面清除定时器，并判断是不是 单击事件
在 touchmove(手指移动)里面清除定时器，并设定当前不是 单击事件
代码
HTML
<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend" class="div">按钮</div>
JS
export default {
data() {
return {}
},
methods: {
// 手指按下事件
gotouchstart() {
window.isClick = true
clearTimeout(this.timeOut)
this.timeOut = setTimeout(function() {
console.log('在这里执行长按事件')
window.isClick = false
}, 500)
},
//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend() {
if (window.isClick) {
console.log('在这里执行点击事件')
}
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
gotouchmove() {
console.log('手指移动了')
window.isClick = false
}
// 项目销毁前清除定时器
beforeDestroy() {
clearTimeout(this.timeOut)
}
}
style（去除长按出现的文字复制影响）
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
补充：下面看下Vue使用自定义指令实现按钮长按提示功能，超简单！
项目场景
点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件
实现思路
- 首先，需要创建一个计时器，在2 秒后开始执行函数，用户按下按钮时触发
mousedown事件，开始计时； - 当鼠标移开按钮时开始调用
mouseout事件 - 第一种情况，当
mouseup事件 2 秒内被触发了，需要清除计时器，相当于进行了普通的点击事件 - 第二种情况，当计时器没有在 2 秒内清除，那么这就可以判定为一次长按，可以执行长按的逻辑了。
- 如果在移动端使用，使用的就是
touchstart，touchend事件了 实现效果
实现代码
<template>
<div>
<div class="btn-copy"><el-button v-press="handleClickLong">长按</el-button></div>
</div>
</template>
<script>
import press from '../../directive/test/press'
export default {
directives: {
press
},
data(){
return{
}
},
methods:{
handleClickLong () {
alert('实现了长按哦！！！')
},
}
}
</script>
<style lang="scss">
</style>
press.js文件如下：
const press = {
bind: function (el, binding, vNode) {
console.log(el, binding, vNode)
// el就是dom
if (typeof binding.value !== 'function') {
throw 'callback must be a function'
}
// 定义变量
let pressTimer = null
// 创建计时器（ 2秒后执行函数 ）
let start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler()
}, 2000)
}
}
// 取消计时器
let cancel = (e) => {
console.log(e)
if (pressTimer !== null) {
clearTimeout(pressTimer)
pressTimer = null
}
}
// 运行函数
const handler = (e) => {
binding.value(e)
}
// 添加事件监听器
el.addEventListener('mousedown', start)
el.addEventListener('touchstart', start)
// 取消计时器
el.addEventListener('click', cancel)
el.addEventListener('mouseout', cancel)
el.addEventListener('touchend', cancel)
el.addEventListener('touchcancel', cancel)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default press