美文网首页
原生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