解决WebView与上层父元素的TouchMove事件冲突

在开发过程中你可能会遇到这样一种情况。端里面使用ViewPager嵌套了多个WebView页面，同时某一个WebView中的页面元素需要响应TouchMove事件。正如下图所示的情景：

image

这时你就会发现上层（ViewPager）阻断了下层（WebView）接收TouchMove事件，即使你的WebView在TouchDown时返回true也无效，因为上层直接使用了onInterceptTouchEvent对后续的TouchMove进行了拦截。针对这个问题的解决，简单做法是在重写WebView onTouchEvent方法，如下：

 1 @Override
 2 public boolean onTouchEvent(MotionEvent ev) {
 3     boolean ret = super.onTouchEvent(ev);
 4     if (mPreventParentTouch) {
 5         switch (ev.getAction()) {
 6             case MotionEvent.ACTION_MOVE:
 7                 requestDisallowInterceptTouchEvent(true);
 8                 ret = true;
 9                 break;
10             case MotionEvent.ACTION_UP:
11             case MotionEvent.ACTION_CANCEL:
12                 requestDisallowInterceptTouchEvent(false);
13                 mPreventParentTouch = false;
14                 break;
15         }
16     }
17     return ret;
18 }
19 public void preventParentTouchEvent () {
20     mPreventParentTouch = true;
21 }

 

代码控制的关键在于mPreventParentTouch这个变量，mPreventParentTouch默认为false，当用户touchdown页面元素时通知该WebView将mPreventParentTouch设置为true。示意代码如下：

 1 <script type="text/javascript">
 2     document.getElementById("targetEle").addEventListener("touchstart",
 3         function(ev) {
 4             HostApp.preventParentTouchEvent();   // 通知WebView阻止祖先对其Touch事件的拦截
 5         }
 6     );
 7     document.getElementById("targetEle").addEventListener("touchmove",
 8         function(ev) {
 9             // todo something on this page
10         }
11     );
12 </script>

 

关于web页面如何通知WebView(即调用Java方法)请参看Android WebView开发问题及优化汇总第8条。

刚提到了上面是一种简单的做法，并不能很好的解决手指滑动过快带来的误操作问题，即当用户快速地滑动时，还是有一定机率会出现ViewPager拦截TouchMove事件而发生了Tab切换而非页面元素做出了响应。要完美解决此问题，就要用到稍微复杂一点的方法（仅是整体消息传递流程复杂一点）。

首先假设在ViewPager之上还有一个父元素叫做ParentViewOnViewPager，当我们接收到页面preventParentTouchEvent通知时就先于ViewPager而进行拦截。如下：

ParentViewOnViewPager.java

 1 public class ParentViewOnViewPager extends FrameLayout {
 2     private MineWebView mDispatchWebView;
 3     public void preventParentTouchEvent (WebView view) {
 4         mDispatchWebView = (MineWebView)view;
 5     }
 6     @Override
 7     public boolean onInterceptTouchEvent(MotionEvent ev) {
 8         if (ev.getAction() == MotionEvent.ACTION_MOVE && mDispatchWebView != null) {
 9             mDispatchWebView.ignoreTouchCancel(true);
10             return true;
11         }
12         return false;
13     }
14     @Override
15     public boolean onTouchEvent(MotionEvent ev) {
16         if (mDispatchWebView != null){
17             switch (ev.getAction()) {
18                 case MotionEvent.ACTION_MOVE:
19                     mDispatchWebView.onTouchEvent(ev);
20                     break;
21                 default:
22                     mDispatchWebView.ignoreTouchCancel(false);
23                     mDispatchWebView.onTouchEvent(ev);
24                     mDispatchWebView = null;
25                     break;
26             }
27             return true;
28         }
29         return super.onTouchEvent(ev);
30     }
31 }

 


MineWebView.java即当ParentViewOnViewPager接收到通知时，发起TouchEvent拦截，将拦截到的Touch事件转嫁到装载页面的mDispatchWebView进行事件派发。这样就直接跳过了ViewPager这一层。这里需要注意的是当ParentViewOnViewPager发起拦截时，WebView会接收到一个TouchCancel事件，WebView应该忽略这个事件，以避免页面接收到这个事件而打断整个处理流程。如下代码所示：

 1 public class MineWebView extends WebView {
 2     boolean mIgnoreTouchCancel;
 3     public void ignoreTouchCancel (boolean val) {
 4         mIgnoreTouchCancel = val;
 5     }
 6     @Override
 7     public boolean onTouchEvent(MotionEvent ev) {
 8         return ev.getAction() == MotionEvent.ACTION_CANCEL && mIgnoreTouchCancel || super.onTouchEvent(ev);
 9     }
10 }

 


两种方案的Demo代码放在了云盘处 http://yunpan.cn/cgKb9MCwSmdvQ （提取码：ef4f）。另外针对这种解决方案，页面端的JS脚本不用做任何变动。

 

转载地址：http://www.pedant.cn/2014/09/23/webview-touch-conflict/

posted @ 2015-08-28 14:00  -小城-  阅读(892)  评论(0)  编辑  收藏  举报