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

  • 初始化页面监听整个页面手势事件,在生命周期的初始化使用(可以不写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;
    });
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容