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

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

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

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

<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

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);
    }
}

 

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

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);
    }
}

 

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

 

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