[Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview 点击穿透/鬼点击(Ghost Click) 的缓解办法
来源:互联网 发布:网络成瘾怎么办 编辑:程序博客网 时间:2024/04/29 05:50
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/28855051
安卓的webview和自带浏览器下有个奇怪的现象。
现象:
1、如果输入框input或者textarea的正上方(z轴方向,即上层)有个div,当点击这个div使得div隐藏了之后,input会得到焦点,导致软键盘弹出。
2、浏览视图点击某个地方切换到编辑视图,如果浏览视图点击的位置 在 编辑视图相应位置有个输入框,那么切换过去之后,编辑页的输入框会自动得到焦点。
这个体验很不舒服。
讨论:
这个不是点击事件的事件冒泡导致的(因为e.stopPropagation()和return false是没有用的),因为如果把输入框换成一个按钮,按钮的事件是不会触发的。
其实是因为先触发的是touchstart,手指离开后触发touchend,300ms之后触发了click。如果在300ms之后的位置刚好有一个input,那就被click了,也就是被focus,自动弹出键盘了。
安卓自带浏览器和webview有这个问题,IOS也有,移动版chrome没有这个现象。
所以这个就是webview的bug了。
昨天找到一个缓解办法,为什么不叫解决办法?因为安卓的bug我没法去改进,只能通过一些技巧来避免这个问题。
好了,办法如下:
1、写一个名为prevent-pointer-events的css(名字无所谓,自己取),内容如下:
.x-container.prevent-pointer-events input, .x-container.prevent-pointer-events textarea {pointer-events: none;}
pointer-events: none:顾名思意,就是鼠标事件拜拜的意思(当然,触摸事件也一样)。元素应用了该CSS属性,链接啊,点击啊什么的都变成了“浮云牌酱油”。
有了这个css样式的input和textarea是不能被聚焦的。
2、监听Ext.Viewport的avtiveitemchange事件之前和之后。在avtiveitemchange事件之前,给将要切换到的新视图添加prevent-pointer-events样式;在avtiveitemchange事件之后,给已经切换到的新视图移除prevent-pointer-events样式(当然,要一段时间之后才能移除,不然没效果,比如300ms之后)
Ext.Viewport.onBefore('activeitemchange', function(container, newItem, oldItem) { if (newItem.element) newItem.element.addCls('prevent-pointer-events'); }, this); Ext.Viewport.onAfter('activeitemchange', function(container, newItem, oldItem) { setTimeout(function() { if (newItem.element) newItem.element.removeCls('prevent-pointer-events'); }, 300);}, this);
如果你用了navigationview进行视图间切换的,那么你也应该在navigationview的avtiveitemchange事件之前和之后添加这两个事件处理函数(记得navigationview在destroy的时候移除这两个事件监听处理函数,否则可能有脚本错误can't call method 'removeCls' of undefined。移除监听用unBefore和unAfter)。
3、还有一处。当Ext.Msg弹出消息框之后,点击消息框按钮使消息框隐藏,如果消息框按钮正下方有输入框,输入框也会聚焦到。所以这里也要处理下(同理,其他各种各样的情形)。
消息框弹出的时候会有个mask遮罩层显示,我们可以在mask显示出来的时候,把它正下方的视图添加prevent-pointer-events样式;mask隐藏的时候,把它正下方的视图移除prevent-pointer-events样式
Ext.Viewport.on({ delegate: 'mask', show: function(mask) { var activeItem = Ext.Viewport.getActiveItem(); if (activeItem.element) activeItem.element.addCls('prevent-pointer-events'); }, hide: function(mask) { var activeItem = Ext.Viewport.getActiveItem(); setTimeout(function() { if (activeItem.element) activeItem.element.removeCls('prevent-pointer-events'); }, 300); }});
欢迎加入Sencha Touch + Phonegap交流群
1群:194182999 (满)
2群:419834979
共同学习交流(博主QQ:479858761)
- [Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview 点击穿透/鬼点击(Ghost Click) 的缓解办法
- [Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview点击穿透的缓解办法
- extjs6、sencha touch 点击穿透/鬼点击(Ghost Click) 的缓解办法
- [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法
- [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决办法
- [Phonegap+Sencha Touch] 移动开发17 使用桌面chrome调试安卓设备上的chrome和cordova app(webview)
- [Phonegap+Sencha Touch] 移动开发17 使用桌面版chrome调试安卓设备上的chrome和webview
- [Phonegap+Sencha Touch] 移动开发17 使用桌面版chrome调试安卓设备上的chrome和webview
- [Phonegap+Sencha Touch] 移动开发70 cordova app中使用增强的webview
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- [Phonegap+Sencha Touch] 移动开发63 PhoneGap和Cordova的区别
- [Phonegap+Sencha Touch] 移动开发58 从移动浏览器(或webview)网页上点击链接跳转到QQ聊天界面
- [Phonegap+Sencha Touch] 移动开发27、禁用iOS系统的webapp电话号码自动识别
- [Phonegap+Sencha Touch] 移动开发27、禁用iOS系统的webapp电话号码自动识别
- [Phonegap+Sencha Touch] 移动开发7、Sencha Touch图标的使用与自定义
- [Phonegap+Sencha Touch] 移动开发12 Sencha Touch打包发布网站的离线缓存版本
- [Phonegap+Sencha Touch] 移动开发21 Sencha touch tapHold事件 触发时间太长的解决办法
- [Phonegap+Sencha Touch] 移动开发28 小米3不支持Sencha touch的解决办法
- 网易云音乐(1)————它是音乐社区
- 温故而知新:Delegate,Action,Func,匿名方法,匿名委托,事件
- C语言学习笔记(二)流程控制
- CubieBoard3 安装SSD记录笔记
- MemcachedClient.store 一直返回false?
- [Phonegap+Sencha Touch] 移动开发23 Android和IOS的webview 点击穿透/鬼点击(Ghost Click) 的缓解办法
- webkit浏览器开发之路(一)——环境搭建
- 网络效应VS平台效应,如何选择主要价值引擎?
- 作为一个程序员,你的进步完全取决于你自己
- 汇编语言---函数调用栈
- CCDictionary中objectForKey和valueForKey的区别
- 在MVC 中使用code first迁移步骤
- Linux System Programming note 9 ——Memory Management
- redis 简单官方脚本安装方法(linux)