使用iScroll时input复选框不能选中解决方法
项目中有用到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;
备注:不积跬步无以至千里,不积小流无以成江河;不要因为小就忽略它!