iScroll5 安卓手机点击事件失效
一、测试平台
三星 i9023 android 4.1.2 (正常)
三星 i9250 android 4.2.2 (存在问题)
三星 i9300 android4.1.1 (存在问题)
三星 i9308 android 4.0.4 (存在问题)
二、问题描述
上述手机出现无法滑动或者无法触发点击事件的情况
三、问题分析
1、onBeforeScrollStart方法
onBeforeScrollStart: function (e) { e.preventDefault(); }
此方法是在_start里进行了调用,目的是为了阻止浏览器默认动作的执行,防止在滑动的过程中进行干扰,同时也就阻止了滑动区域里元素的事件的触发,这种处理方式也直接导致了必须要在_end方法中再次触发元素的点击事件
2、_end方法
if(target.tagName != ‘SELECT‘ && target.tagName != ‘INPUT‘&& target.tagName != ‘TEXTAREA‘) {
ev= document.createEvent(‘MouseEvents‘);
ev.initMouseEvent(‘click‘,true,true,
e.view,1,point.screenX,
point.screenY, point.clientX,
point.clientY,e.ctrlKey,
e.altKey, e.shiftKey,
e.metaKey,0,null);
ev._fake=true;
target.dispatchEvent(ev);
}
这个处理方式就是顺承了上面所提到的阻止了浏览器默认行为后,对滑动区域除SELECT、INPUT、TEXTAREA外的元素触发click事件,已完成对click绑定事件的调用。
【具体分析】
由于onBeforeScrollStart是在_start方法中进行的调用,e.preventDefault();阻止了元素的默认行为,从而导致了元素绑定事件的失效,必须在_end操作结束后进行绑定事件的模拟调用,原始的iScroll源代码中在_end中最后创建了click事件的模拟,但是这里必须要清楚的一个原理就是,click其实是要依赖于其他事件的:
1) 普通pc网页中,click需要依赖于mousedown、mouseup的相继触发
2) 移动webkit中,click则需要依赖于touchstart、touchend(实际mousedown,mouseup在移动webkit上也存在)的相继触发
“相继触发”的意思就是中间不会夹杂有其他的事件类型,这也就很容易理解iScroll中在_end中对模拟事件调用的条件了,必须要判断that.moved才能直接触
发模拟事件。
iScroll中与_start、_move、_end相关的三个事件类型是按照如下的规则来设置的:
START_EV = hasTouch ? ‘touchstart‘ : ‘mousedown‘MOVE_EV= hasTouch ? ‘touchmove‘ : ‘mousemove‘END_EV= hasTouch ? ‘touchend‘ : ‘mouseup‘
【注意事项】
经测试,三星部分手机里默认浏览器里会默认所有元素都有一个默认的click事件(测试结果显示鼠标事件中默认事件包含mouseup,mousedown,click,dblclick在移动webkit上不支持,为系统放大功能),e.preventDefault时会阻止掉默认click事件的执行,必须要人为的在_end结束之后模拟click事件的调用,而其他正常手机即使调用了e.preventDefault也不会阻止click事件的触发,因为这些手机的默认浏览器上的元素的click事件的cancelable属性不为true,不可以被preventDefault取消掉,会正常执行,而如果在_end中模拟了click事件则将会导致click的重复调用(在有toggle状态的事件上非常明显),因此折中的方式参见下面的解决方案。
四、解决方案
1. 去除onBeforeScrollStart里的阻止默认行为
onBeforeScrollStart: function (e) { //e.preventDefault(); }
2. onBeforeScrollMove设置为
function (e) {e.preventDefault();}
以保证手机上的正常滑动免受浏览器默认行为影响(如下滑时会有窗口的scroll事件),当然如果这里不添加的话也可以在document的END_EV中阻止浏览器默认行为
3. _end 中将模拟事件名更改为END_EV或者直接去掉模拟事件的功能
iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。
替换代码:
onBeforeScrollStart:function(e) {
varnodeType = e.explicitOriginalTarget? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target?e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault();
//e.preventDefault();
},