iScroll5 安卓手机点击事件失效

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();

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,591评论 2 10
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,129评论 0 0
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,247评论 0 6
  • H5 meta详解 viewport width:控制 viewport 的大小,可以指定的一个值,如果 600,...
    FConfidence阅读 796评论 0 3
  • 文/千古为序 昨天开毕业年级会议的时候,校长谈到了“上学无用论。”他是这样说的:“如果上清华北大的学生中,有一个生...
    千古作序阅读 446评论 0 0