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

1、先来看看vue怎么取消默认浏览器事件的

(1)vue取消冒泡事件

<--! 将@click改为@click.stop即可 -->

@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);
    }
}

你可能感兴趣的:(Html/CSS/JS,Vue,vue,长按事件)