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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@Override public 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。示意代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

<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.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

public class ParentViewOnViewPager extends FrameLayout { private MineWebView mDispatchWebView; public void preventParentTouchEvent (WebView view) { mDispatchWebView = (MineWebView)view; } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_MOVE && mDispatchWebView != null) { mDispatchWebView.ignoreTouchCancel(true); return true; } return false; } @Override public 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.java

1 2 3 4 5 6 7 8 9 10 11 12

public class MineWebView extends WebView { boolean mIgnoreTouchCancel; public void ignoreTouchCancel (boolean val) { mIgnoreTouchCancel = val; } @Override public boolean onTouchEvent(MotionEvent ev) { return ev.getAction() == MotionEvent.ACTION_CANCEL && mIgnoreTouchCancel || super.onTouchEvent(ev); } }

另外针对这种解决方案，页面端的JS脚本不用做任何变动。

• 两种方案的Demo代码放在了云盘处 http://yunpan.cn/cgKb9MCwSmdvQ （提取码：ef4f）。

欢迎转载，请注明出处链接！！！