zoukankan      html  css  js  c++  java
  • vue 长按事件?

    var timeOutEvent=0;//定时器   

    html结构:

    <div @touchstart="gtouchstart(v)" @touchmove="gtouchmove()" @touchend="gtouchend(v)"></div>
    //开始按
                  gtouchstart:function gtouchstart(item){
                      timeOutEvent = setTimeout(function(){
                          vm.longPress(item)
                      },500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适
                      return false;
                  },
                  //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
                  gtouchend:function gtouchend(item){
                      clearTimeout(timeOutEvent);//清除定时器
                      if(timeOutEvent!=0){
                          //这里写要执行的内容(尤如onclick事件)
                          vm.goChat(item);
                      }
                      return false;
                  },
                  //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
                  gtouchmove:function gtouchmove(){
                      clearTimeout(timeOutEvent);//清除定时器
                      timeOutEvent = 0;
    
                  },
    
                  //真正长按后应该执行的内容
                  longPress:function longPress(item){
                      timeOutEvent = 0;
                      //执行长按要执行的内容,如弹出菜单
                      $api.css($api.dom('.Popup'), 'display:block');
                  }

    源地址:https://www.cnblogs.com/imsomnus/p/6429074.html

  • 相关阅读:
    vue——项目技术储备
    Framework7—— 混合开发
    CSS——常见的问题
    Vue——常见问题
    Vue——使用 watch 注意项
    Node——微服务架构(二)
    C——基本词汇
    Go——空接口与断言
    Node——PM2
    Vue——组件异步加载与路由懒加载
  • 原文地址:https://www.cnblogs.com/xushengguan/p/8670651.html
Copyright © 2011-2022 走看看