大家好,又见面了,我是你们的朋友全栈君。
今天要做一个页面div长按后触发事件,简单学习后实现如下:
先看代码:
<template>
<div>
<div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">试一试呀!</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods:{
gtouchstart(){
window.console.log('1,按下啦啦啦啦啦')
},
gtouchmove(){
window.console.log('2,按下并且在移动呢')
},
gtouchend(){
window.console.log('3,松开啦啦啦啦啦')
}
}
}
</script>
<style scoped>
.test{
width: 100%;
height: 50px;;
text-align: center;
background-color: red;
line-height: 50px;
font-size: 50px;
}
</style>
看结果:
鼠标在红色区域内按下会输出1,
按下鼠标不松开然后移动会输出2,
松开后就会输出3,
根据自己的情况在三个函数里写入相应的功能。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150773.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...