项目中有用到iScroll做移动端滑动效果的,里面有input复选框<input name="" type="checkbox" value="">组件;
此时出现了,点击复选框不起作用现象。
原因:由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为
解决办法如下,由于iScroll5和4源码变化较大,所以处理方式有点不同,但是大致解决办法是一样的:

方法一(元素排除法):

iScroll5版本:

源码中找到事件方法handleEvent: function (e) {};
其中对click的监听方法阻止冒泡做修改,注释部分打开即可

//case 'click':
if ( this.enabled && !e._constructed ) {
    //使用iScroll时input复选框不能选中解决方法
    // var target = e.target;
    // while (target.nodeType != 1) target = target.parentNode;
    // if (target.tagName != 'INPUT')
    // e.preventDefault();
    // e.stopPropagation();

    e.preventDefault();
    e.stopPropagation();
}

iScroll4版本:

源码中找到onBeforeScrollStart: function (e) { e.preventDefault(); };
替换为:

onBeforeScrollStart: function (e) { 
    //使用iScroll时input复选框不能选中解决方法
    var target = e.target;
    while (target.nodeType != 1) target = target.parentNode;
    if (target.tagName != 'INPUT')
    e.preventDefault();
};

方法二(参数设置):

iScroll5版本:

参数中preventDefault: true 修改为 preventDefault: false即可,但是此方法是处理了所有的冒泡传递事件,虽然也可解决当前问题;但是会对iscroll设计初衷流畅度有所影响

方法三(判断排除法,类似于方法一):

iScroll5版本:

源码中添加一句话&& !utils.preventDefaultException(e.target, this.options.preventDefaultException),
源码中找到事件方法handleEvent: function (e) {};
其中对click的监听方法阻止冒泡做修改,注释部分打开即可

case 'click':
if ( this.enabled && !e._constructed && !utils.preventDefaultException(e.target, this.options.preventDefaultException)) {            
    e.preventDefault();
    e.stopPropagation();
}
break;

备注:不积跬步无以至千里,不积小流无以成江河;不要因为小就忽略它!

标签: none

添加新评论

选择表情