H5頁面--Android滑動屏幕圖片誤觸

處理移動端上點擊有300ms延遲的方法，我們通常會用fastclick.js來解決，但是調用fastclick.js可能會導致另一個問題，就是在安卓端的時候，H5頁面未加載完時，滑動頁面如果誤觸圖片，會觸發圖片的點擊事件，這在實際應用中是很不好的體驗，在此，我自己在開發中遇到，給出如下的一套解決方案：

判斷頁面是否加載完畢，未加載完時不讓觸發點擊事件，加載完畢才允許觸發點擊事件

document.readyState == 'complete'加載完畢 / document.readyState == 'loading'加載中

在這裏，我們先定義一個變量，記錄頁面加載的狀態；

var loadState = false;   //初始值默認爲false

建立一個函數，實時監控頁面當前的加載狀態：

document.onreadystatechange = clickSomething;

function clickSomething() {

    if (document.readyState == "complete") { //當頁面加載狀態爲完全結束時進入

        loadState = true;

    }

}

判斷當前加載狀態，加載完畢則允許觸發點擊事件：

// 全屏圖片預覽

$('img[data-mce-attachid]').on("click", function() {

    if (loadState) {

        var max = $(this).data("max");

        if (!max) {

            max = $(this).attr("src");

        }

        $("body").append("<div class='maxFigure' ontouchmove='return false'><img src=" + max + "><span class='close' onclick=$('.maxFigure').remove()></span></div>");

    }
        
});

這裏有個坑需要注意，加載狀態的if判斷要寫在click事件裏面，如果包裹在外面，click事件可能會加載不出來。