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

在开发过程中你可能会遇到这样一种情况。端里面使用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.java

12345678910111213141516171819202122232425262728293031323334

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

123456789101112

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）。

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