使用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;

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



  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值