完美解决WebView与上层父元素的TouchMove事件冲突
来源:互联网 发布:北京程序员 编辑:程序博客网 时间:2024/05/21 01:47
在开发过程中你可能会遇到这样一种情况。端里面使用ViewPager嵌套了多个WebView页面,同时某一个WebView中的页面元素需要响应TouchMove事件。正如下图所示的情景:
这时你就会发现上层(ViewPager)阻断了下层(WebView)接收TouchMove事件,即使你的WebView在TouchDown时返回true也无效,因为上层直接使用了onInterceptTouchEvent对后续的TouchMove进行了拦截。针对这个问题的解决,简单做法是在重写WebView onTouchEvent方法,如下:
12345678910111213141516171819202122
@Overridepublic boolean onTouchEvent(MotionEvent ev) {boolean ret = super.onTouchEvent(ev);if (mPreventParentTouch) {switch (ev.getAction()) {case MotionEvent.ACTION_MOVE:requestDisallowInterceptTouchEvent(true);ret = true;break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:requestDisallowInterceptTouchEvent(false);mPreventParentTouch = false;break;}}return ret;}public void preventParentTouchEvent () {mPreventParentTouch = true;}
代码控制的关键在于mPreventParentTouch这个变量,mPreventParentTouch默认为false,当用户touchdown页面元素时通知该WebView将mPreventParentTouch设置为true。示意代码如下:
123456789101112
<script type="text/javascript">document.getElementById("targetEle").addEventListener("touchstart",function(ev) {HostApp.preventParentTouchEvent(); // 通知WebView阻止祖先对其Touch事件的拦截});document.getElementById("targetEle").addEventListener("touchmove",function(ev) {// todo something on this page});</script>
关于web页面如何通知WebView(即调用Java方法)请参看Android WebView开发问题及优化汇总第8条。
刚提到了上面是一种简单的做法,并不能很好的解决手指滑动过快带来的误操作问题,即当用户快速地滑动时,还是有一定机率会出现ViewPager拦截TouchMove事件而发生了Tab切换而非页面元素做出了响应。要完美解决此问题,就要用到稍微复杂一点的方法(仅是整体消息传递流程复杂一点)。
首先假设在ViewPager之上还有一个父元素叫做ParentViewOnViewPager,当我们接收到页面preventParentTouchEvent通知时就先于ViewPager而进行拦截。如下:
ParentViewOnViewPager.java12345678910111213141516171819202122232425262728293031323334
public class ParentViewOnViewPager extends FrameLayout {private MineWebView mDispatchWebView;public void preventParentTouchEvent (WebView view) {mDispatchWebView = (MineWebView)view;}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if (ev.getAction() == MotionEvent.ACTION_MOVE && mDispatchWebView != null) {mDispatchWebView.ignoreTouchCancel(true);return true;}return false;}@Overridepublic boolean onTouchEvent(MotionEvent ev) {if (mDispatchWebView != null){switch (ev.getAction()) {case MotionEvent.ACTION_MOVE:mDispatchWebView.onTouchEvent(ev);break;default:mDispatchWebView.ignoreTouchCancel(false);mDispatchWebView.onTouchEvent(ev);mDispatchWebView = null;break;}return true;}return super.onTouchEvent(ev);}}
即当ParentViewOnViewPager接收到通知时,发起TouchEvent拦截,将拦截到的Touch事件转嫁到装载页面的mDispatchWebView进行事件派发。这样就直接跳过了ViewPager这一层。这里需要注意的是当ParentViewOnViewPager发起拦截时,WebView会接收到一个TouchCancel事件,WebView应该忽略这个事件,以避免页面接收到这个事件而打断整个处理流程。如下代码所示:
MineWebView.java123456789101112
public class MineWebView extends WebView {boolean mIgnoreTouchCancel;public void ignoreTouchCancel (boolean val) {mIgnoreTouchCancel = val;}@Overridepublic boolean onTouchEvent(MotionEvent ev) {return ev.getAction() == MotionEvent.ACTION_CANCEL && mIgnoreTouchCancel || super.onTouchEvent(ev);}}
- 完美解决WebView与上层父元素的TouchMove事件冲突
- 完美解决WebView与上层父元素的TouchMove事件冲突
- 完美解决SwipeRefreshLayout与WebView冲突
- 微信中body的touchmove事件(下拉显示网址)影响元素的touchmove事件的解决方法
- 完美解决HorizontalScrollView与ListView滑动事件冲突
- Android WebView下拉刷新与SwipeRefreshLayout事件冲突解决
- touchmove 事件中获取真正触摸点下方的元素
- 解决ViewPager与父ViewGrop的事件冲突
- 完美解决Ecshop2.72与Jquery冲突的办法
- 完美解决ScrollView与内部嵌套的TextView滚动冲突
- 完美解决ScrollView与内部嵌套的TextView滚动冲突
- 完美解决主工程与lib库的provider冲突
- 完美解决主工程与lib库的FileProvider冲突
- 移动端 touchmove高频事件与requestAnimationFrame的结合优化
- Android中scrollview与webview冲突事件
- 【jQuery】jQuery双击事件与单击事件的冲突解决
- 完美解决ScrollView与ListView冲突问题(ListView与ListView的冲突)
- android webview setBuiltInZoomControls 与 onTouch 冲突解决
- java 编写接口性能脚本
- Android Studio - 详解build.gradle
- MySQL查询表内重复记录
- MATLAB中的常用函数
- 如何判断平台工具集去做条件编译(VC++目录、预处理器定义、$(PlatformToolsetVersion))
- 完美解决WebView与上层父元素的TouchMove事件冲突
- codeforces 339C C. Xenia and Weights(dp)
- LA 3135 Argus 优先队列
- 将数据从DATASET导入到WINFORM中的LISTVIEW、LISTBOX、COMBOBOX控件的方法
- linux常用命令-1
- 设计模式-生产者消费者模式
- (2.2.2.3)设计模式--单例模式(三)改进型懒汉式-线程安全型
- Palindrome Partitioning II
- Maximal Rectangle