问题形容

挪动端因为屏幕双击会缩放页面,因而挪动端click事件会有300ms延时状况的产生

解决方案

办法一:全局禁止缩放
  1. 在html页面头部的meta标签中加上content="user-scalable=no"
<meta content="user-scalable=no">
  1. 该办法会让浏览器禁用默认的双击行为并且去掉300ms点击延时
  2. 实用场景:须要对整个页面进行禁用双击行为。然而个别不罕用。
办法二:封装tap函数解决300ms提早
  1. 原理

    1. 当手指触摸屏幕,记录以后触摸工夫
    2. 当手指来到屏幕,用来到工夫减去触摸工夫
    3. 如果工夫小于150ms,并且没有滑动过屏幕,那么将这行为近似作为点击事件来解决,并实现相应的点击处理函数
  2. 实现代码
    /**     * 封装tap 解决挪动端click事件300ms延时问题     * @param obj 监听对象     * @param callback 执行的函数     */    function tap(obj,callback) {    // 判断是否滑动的标记位    var isMove = false;    // 记录触摸开始工夫    var startTime = 0;    // 开始触摸 记录开始触摸工夫    obj.addEventListener('touchstart',function (e) {        startTime = Date.now();    })    // 开始滑动 扭转滑动标记位 有滑动 算拖拽 不算点击    obj.addEventListener('touchmove',function () {        isMove = true;    })    // 手指来到屏幕    obj.addEventListener('touchend',function () {        // 如果为滑动事件 则间接掠过  如果不是滑动事件且 工夫小于150ms则认为是点击操作 将执行点击业务逻辑,也即回调函数callback()        if (isMove && (Date.now() - startTime < 150)) {        // 如果有回调函数 则执行回调函数中的业务逻辑            callback && callback();        }        // 重置标记位        isMove = false;        startTime = 0;    })}// 调用    tap(div,function () {        // 执行业务逻辑    })