处理移动端上点击有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事件可能会加载不出来。