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事件可能会加载不出来。