webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面，然后通过webview嵌套在activity中，效果是这样：
开始还是比较顺利，增加了菜单退出按钮，返回键页面回退功能，页面加载显示加载图标（在app端实现，本来是为了增强用户体验，在页面加载的时候可以显示一个转动的图标，但是到了最后，这个功能反而成了影响用户体验的鸡肋， 因为页面中有很多图片， 每次页面显示出来后，图片还没加载完毕，所以加载图标一直在那里转动，影响了用户浏览页面，最后将此功能删除了）。
以上基本具备了混合app的雏形，可以拿出来忽悠一下客户了。
但是本着追求完美，不断创新的自虐精神，我又想在app上增加左右滑动可使页面前进和倒退的功能。其实在app上实现这些不难，在webview加载一个监听器，监听左右滑动事件，然后调用webview的 goback() 和 goForward就欧了，自己重载一个webview就可以实现，代码如下
public class cbWebView extends WebView { private GestureDetector gestureDetector; private Context cb; public cbWebView(Context context) { super(context); cb = context; gestureDetector = new GestureDetector(this.getContext(), onGestureListener); } public cbWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); cb = context; gestureDetector = new GestureDetector(this.getContext(), onGestureListener); } public cbWebView(Context context, AttributeSet attrs) { super(context, attrs); cb = context; gestureDetector = new GestureDetector(this.getContext(), onGestureListener); } // 重载滑动事件 @Override public boolean onTouchEvent(MotionEvent evt) { gestureDetector.onTouchEvent(evt); return super.onTouchEvent(evt); } private GestureDetector.OnGestureListener onGestureListener = new GestureDetector.SimpleOnGestureListener() { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { float x = e2.getX() - e1.getX(); float y = e2.getY() - e1.getY(); if (x > 100) { // 右滑 事件 Toast.makeText(cb, "右滑动2", Toast.LENGTH_LONG).show(); cbWebView.this.goBack(); } else if (x < -100) { // 左滑事件 Toast.makeText(cb, "左滑动2", Toast.LENGTH_LONG).show(); cbWebView.this.goForward(); } return true; } }; }
之后坑爹的问题来了，因为页面中有个轮播图片，也是通过左右滑动切换图片，这就造成了，我滑动轮播图片的时候，也会触发webview的左右滑动事件，这可玩大了，本来只想滑动一下轮播图片，结果跳到了另外的一个页面......
我想造成这个问题的原因是，在html中的滑动事件，顺利的传送到了webview上。 我在网上查了很多资料，一直也没有好的解决办法，http://www.eoeandroid.com/thread-313541-1-1.html 这哥们碰到和我类似的问题，到目前也还没解决。但是这个问题肯定是可以解决的， 我下载了几个浏览器，UCWEB 、qq浏览器、360浏览器可以实现滑动切换页面，并且不与html中的touch事件冲突，android自带浏览器和遨游浏览器没有实现左右滑动切换功能。也许UCweb 这些浏览器没有使用webkit内核，也可能有什么其他高明的解决办法我们不知道。
但是不实现这个功能，总是不甘心，于是我又在baidu上一顿乱找，无意间看到这篇文章让我灵光一现
http://blog.csdn.net/wangtingshuai/article/details/8635787
这篇文章讲的是
”响应webview中的图片点击事件“，我好像找到了救命稻草，既然能够响应点击事件，那肯定也可以响应 ontouch事件，我只需要在轮播图片的touch事件中关闭webview的滑动响应就可以了（不要告诉我你不知道js与webview怎么通信，
网上教程有很多，自己看去）。
文章中的代码
// 注入js函数监听 private void addImageClickListner() { // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去 contentWebView.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName(\"img\"); " + "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].onclick=function() " + " { " + " window.imagelistner.openImage(this.src); " + " } " + "}" + "})()"); }
经过改装后：
// 注入js函数监听 private void addImageClickListner() { // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去 mWebView.loadUrl("javascript:(function(){" + "var objs = $(‘.swiper-container‘); " //轮播图片的div容器， + "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].ontouchmove=function() " + " { " + " window.imagelistner.closetouch(); " + " return false; } " + "}" + "var objs = $(‘body‘); " //点击任何地方 ， 系统开始可以接受滚动 + "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].ontouchstart=function() " + " { " + " window.imagelistner.opentouch(); " + " return false; } " + "}" + "})()"); }
经过一番折，腾终于不负众望，达到了预期目标。 这里也有一个小瑕疵， "var objs = $(‘.swiper-container‘); " 在js注入时指定了轮播的div ，缺少通用性。
目前只能做到这一步 ，这是我解决此类问题的一个另类思路，如果有更好的方法，还请高人告知，不甚感激！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
