zoukankan      html  css  js  c++  java
  • 移动端使用fastclick时,模拟原生浏览器对象

    移动浏览器原生click事件有300ms的延时,这是浏览器为了区分到底是双击还是单击事件。
    (实际上有些移动浏览器不支持双击事件。PC版chrome在手机模式下,当禁止用户双击缩放页面时(即有viewport meta标签时,不管user-scalable为yes或no),双击会触发两次click事件,但并不会触发dblclick事件,当允许用户双击缩放页面时(即没有viewport meta标签时),双击不会触发click事件,也不会触发dblclick事件,而是会缩放页面;在正常模式下(即PC模式),双击会先触发两次click事件,然后再触发一次dblclick事件)

    fastclick解决了单击事件的300ms延迟问题,原理大致如下:
    touchstart,touchmove,touchend事件是没有延迟的,当touchend事件触发时,如果从touchstart触发到touchend触发的过程中没有移动且时间间隔没有超过界限,那么就执行event.prentDefault()且人为的在目标元素上派发Click事件(targetElement.dispatchEvent(clickEvent),dispatchEvent派发的事件就跟我们在浏览器中实际操作触发的事件一样,能够传播,即有捕获阶段和冒泡阶段)。由于执行了event.prentDefault(),所以会导致浏览器原生的单击和双击事件不会再触发了。

    通过上面的讲解,我们可以知道,使用fastclick后,是无法区分单击和双击的,fastclick统统都认为是单击事件,所以我们只能人为地来模拟单击事件和双击事件(300ms内只有一次点击为单击事件,否则就是双击或者多击事件)。

    //给$elem元素自定义click事件
    function customClick($elem) {
    var lastTouch, //上一次touchstart触发的时间
    touching, //是否正在触屏
    moved, //是否touchmove过
    multiClick, //是否单指多击
    multiFinger; //是否多指操作

    function onTouchStart(event) {
    var t = 300,
    time = new Date().getTime();

    if (event.touches.length !== 1) { //多指操作
    multiFinger = true;
    } else {
    if (lastTouch && time - lastTouch < t) {
    //!multiClick && $elem.dblclick(); 双击事件
    multiClick = true;
    } else {
    multiClick = false;
    moved = false;
    multiFinger = false;
    setTimeout(function () {
    //没有多指操作过,没有多次点击过,触屏期间没有touchmove过,且现在没有触屏
    !multiFinger && !touching && !multiClick && !moved && $elem.clicked();
    }, t);
    }
    }

    lastTouch = time;
    touching = true;
    }

    function onTouchEnd(event) {
    !event.touches.length && (touching = false);
    }

    function onTouchMove(event) {
    moved = true;
    }

    $elem.on('touchstart', onTouchStart).on('touchend', onTouchEnd).on('touchmove', onTouchMove);
    }

  • 相关阅读:
    【OpenCV】图像转成YUV420 I420格式
    【AdaBoost算法】强分类器训练过程
    【AdaBoost算法】弱分类器训练过程
    C# 8小特性
    string.PadLeft & string.PadRight
    string.Format对C#字符串格式化
    多线程调用同一个方法,局部变量会共享吗
    基于C#net4.5websocket客户端与服务端
    使用websocket-sharp来创建c#版本的websocket服务
    原来你是这样的Websocket--抓包分析
  • 原文地址:https://www.cnblogs.com/zhangchuangye/p/6887922.html
Copyright © 2011-2022 走看看