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
}
}