WEB前端开发技术杂谈

Js实现长按事件

2018-06-25  本文已影响790人  _conquer_

最近在做一个项目,点击一个按钮,弹出一张图片,长按图片保存图片,点击图片图片隐藏。
在做的时候发现,当我们长按图片的时候也会执行点击图片的事件,这时候我们就需要判断长按事件和点击事件了。
html

<p class="longtap" @touchstart="start" @touchmove="move" @touchend="end">这是一张图片  </p>

js

export default{
  data(){
    return{
       longClick:0,
       timeOutEvent: 0,
    }
  },
  methods: {
  start(){
    var that =this;
    this.longClick=0;
    this.timeOutEvent =setTimeout(function(){
        that.longClick=1;
    },500)
      },
  move(e){
    clearTimeout(this.timeOutEvent);
    this.timeOutEvent = 0;
    e.preventDefault();
  },
  end(){
    clearTimeout(this.timeOutEvent);
    if(this.timeOutEvent!=0 && this.longClick==0){//点击
         //此处为点击事件----在此处添加跳转详情页
        console.log('这是点击')
     }
     return false;
    },
  }
}
上一篇 下一篇

猜你喜欢

热点阅读