Question

如何解决touchmove在webview失效

Answer 1

在开发过程中你可能会遇到这样一种情况。端里面使用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切换而非页面元素做出了响应。要完美解决此问题，就要用到稍微复杂一点的方法（仅是整体消息传递流程复杂一点）。