Js实现长按事件

作者: _conquer_ | 来源:发表于2018-06-25 16:59 被阅读790次

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

相关文章

  • Js实现长按事件

    最近在做一个项目,点击一个按钮,弹出一张图片,长按图片保存图片,点击图片图片隐藏。在做的时候发现,当我们长按图片的...

  • Js实现移动端长按事件

    前言 最近在做一个移动端的项目,其中有一个收藏列表,其中包含几个事件。1.点击跳转详情页。2.长按显示遮罩层和删除...

  • js长按事件

  • 模拟浏览器长按事件

    因为js没有长按事件,所以我们需要模拟长按事件,核心是利用touchstart和touchend事件加一个定时器解...

  • 51和stm32的按键采集

    1、实现按键回调事件,按下、断开、单击、双击、长按、长按持有等事件。 用这个库来实现https://github....

  • Jquery总结

    Jquery能实现的JS都能实现,JS实现的Jquery未必能实现 事件 常用的基本事件 鼠标事件mouseent...

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • JS键盘事件 长按停顿问题

    问题描述:用js的键盘事件控制一个div移动,当按下一个方向键不放,div会先停顿一下,然后才开始持续移动。(原因...

  • js与jquery方法对比

    一.文档就绪 jquery实现 简写形式为: js实现 二、元素选择 三、点击事件 jquery实现 js实现 四...

  • mui框架里的一些小发现

    mui 事件 点击:tap(单击事件)doubletap(双击事件)长按:longtap(长按屏幕)hold(按住...

网友评论

    本文标题:Js实现长按事件

    本文链接:https://www.haomeiwen.com/subject/duiyyftx.html