vue 实现长按弹出删除框，并解决浏览器默认事件、取消冒泡事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 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);
    }
}