版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haeasringnar/article/details/82419282
1、先来看看vue怎么取消默认浏览器事件的
(1)vue取消冒泡事件
<--! 将@click改为@click.stop即可 -->
<p @click.stop="test($event)">测试</p>
(2)vue取消浏览器默认事件
<p @click.prevent="test($event)">测试</p>
2、然后看vue处理长按、点击事件
在vue中我们做长按或手指滑动事件采用的是touch事件
下面是四种touch事件
touchstart:手指放到屏幕上时触发
touchmove:手指在屏幕上滑动式触发
touchend:手指离开屏幕时触发
touchcancel:系统取消touch事件的时候触发
具体实例:
html代码
<div class="showimg" @touchstart.prevent="touchin(model_image.id,model_image.user.id)" @touchend.prevent="cleartime(model_image.id,model_image.user.id)">
<img :src="model_image.image_url" alt="模型图片">
</div>
对应的methods方法
methods:{
touchin(id,user_id) {
clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器
this.Loop = setTimeout(function() {
alert('是否确认删除')
}.bind(this), 1000);
},
cleartime(id,course_id) {
// 这个方法主要是用来将每次手指移出之后将计时器清零
clearInterval(this.Loop);
}
}