美文网首页
原生JS长按事件(用于二维码分享)

原生JS长按事件(用于二维码分享)

作者: 小碗吃不了 | 来源:发表于2019-12-16 17:23 被阅读0次
    • 初始化页面监听整个页面手势事件,在生命周期的初始化使用(可以不写load事件)

      window.addEventListener('load', function () {
          var longClick =0,timeOutEvent;
          document.addEventListener('touchstart', function (e) {
            longClick=0;
            timeOutEvent = setTimeout(function(){
              window.location.href = "https://www.baidu.com/";
               longClick=1;
            },500);
          })
      
          document.addEventListener('touchend', function () {
            clearTimeout(timeOutEvent);
            if(timeOutEvent!=0 && longClick==0){
             //此处为点击事件----在此处添加跳转详情页
           }
          return false;
         });
      
         document.addEventListener('touchmove', function () {
           clearTimeout(timeOutEvent);
           timeOutEvent = 0;
         });
      
      });
      
    • 监听某个Dom节点的手势事件,在生命周期使用,若节点在弹窗即Dom不能初始化获取的情况,需引用在触发Dom显示的事件中

      var longClick =0,timeOutEvent;
      document.getElementById('Dom').addEventListener('touchstart', function (e) {
          longClick=0;
          timeOutEvent = setTimeout(function(){
             window.location.href = "https://www.baidu.com/";
              longClick=1;
          },500);
        })
      
      document.getElementById('Dom').addEventListener('touchend', function () {
          clearTimeout(timeOutEvent);
          if(timeOutEvent!=0 && longClick==0){
           //此处为点击事件----在此处添加跳转详情页
         }
         return false;
      });
      
      document.getElementById('Dom').addEventListener('touchmove', function () {
          clearTimeout(timeOutEvent);
          timeOutEvent = 0;
      });
      

    相关文章

      网友评论

          本文标题:原生JS长按事件(用于二维码分享)

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