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 ，缺少通用性。

目前只能做到這一步 ，這是我解決此類問題的一個另類思路，如果有更好的方法，還請高人告知，不甚感激！