解决IScroll5在Android设备无法触发click,tap事件

IScroll5官方文档上有说明:options.click默认为false,限制了浏览器的点击事件,如果需要click事件则需要在初始化的时候配置click:true
但是:上面的配置并不能解决大部分问题!!!
实际开发遇到的问题:
1.采用默认配置即click:false时:IOS设备正常,android设备则不能触发click事件
2.修改click:true android设备正常,IOS设备需双击才能触发click
如果只是上面两个问题也好办判断一下设备就好啦:

    var ua = navigator.userAgent.toLocaleLowerCase();
    var pf = navigator.platform.toLocaleLowerCase();
    var isAndroid = (/android/i).test(ua)||((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf)) || (/ucweb.*linux/i.test(ua));
    var isIOS =(/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
    var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
    var mobileType = {
        pc:!isAndroid && !isIOS && !isWinPhone,
        ios:isIOS,
        android:isAndroid,
        winPhone:isWinPhone
    };
//初始化IScroll
    myScroll = new IScroll('#wrapper', {
            probeType: 3,
            click:mobileType.ios?false:true,
            mouseWheel: true
        });

以上即可解决IScroll5在不同终端上对click事件的触发,提交代码后测试童鞋也觉得ok,但是本着追根溯源的思想还是想知道到底是ios和android内核问题导致的还是其他原因?经过查资料发现:

ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染

因此,click的值是要根据移动终端设备进行判断,如果只是简单的判断终端类型的话,android4.4+还是不能点击,这就是安卓的一个坑,毕竟没有IOS系统做的统一。
故改进措施为:

  myScroll = new IScroll("#wrapper", {
        click:iScrollClick(), //调用判断函数
        scrollbars: true,//有滚动条
        mouseWheel: true,//允许滑轮滚动
        fadeScrollbars: true//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
    });
function iScrollClick(){
    if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) return false;
    if (/Chrome/i.test(navigator.userAgent)) return (/Android/i.test(navigator.userAgent));
    if (/Silk/i.test(navigator.userAgent)) return false;
    if (/Android/i.test(navigator.userAgent)) {
       var s=navigator.userAgent.substr(navigator.userAgent.indexOf('Android')+8,3);
       return parseFloat(s[0]+s[3]) < 44 ? false : true
    }
}

你可能感兴趣的:(解决IScroll5在Android设备无法触发click,tap事件)