解决iscorlljs的文本中绑定点击事件不能触发的问题

解决iscroll5在手机页面上onclick事件失效

摘要:解决iscroll5在手机页面上onclick事件失效

解决办法:

第一种办法:实例化IScroll的时候把preventDefault设为false,默认为true的

var myScroll;
function loaded () {
  myScroll = new IScroll('#wrapper', {
    //preventDefault为false这行就是解决onclick失效问题
    //为true就是阻止事件冒泡,所以onclick没用
    preventDefault:false,
    scrollX: true,
    scrollY: false,
    momentum: false,
    snap: true,
      snapSpeed: 400,
    keyBindings: true,
    indicators: {
	   el: document.getElementById('indicator'),
	  resize: false
    }
  });   } window.onload=loaded;

第二种办法:

Bug描述:

ios、android4.4+下不能触发click事件。

Bug解决:

调用iscroll插件,增加配置参数:click:true/false

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

故增加一个函数去判断:

// #########
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,4);
	   return parseFloat(s[0]+s[3]) < 44 ? false : true
    }
}

配置实例:

 myScroll = new IScroll("#ID", {
	click:iScrollClick(), //调用判断函数
        scrollbars: true,//有滚动条
        mouseWheel: true,//允许滑轮滚动
        fadeScrollbars: true//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
    });
以上两种办法基本解决这个问题。



posted @ 2016-05-19 11:55  爱博子  阅读(718)  评论(0编辑  收藏  举报