移动浏览器原生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);
}

移动端使用fastclick时,模拟原生浏览器对象的更多相关文章

  1. 页面在Native端滚动时模拟原生的弹性滚动效果

    width: 100%;overflow: scroll;overflow-y: hidden;-webkit-overflow-scrolling: touch;   ---- 对应的滚动内容内添加 ...

  2. day63—JavaScript浏览器对象cookie

    转行学开发,代码100天——2018-05-18 今天的主要学内容时JavaScript中浏览器对象——cookie. cookie用于存储web页面的用户信息,其存储容量很小,一般几k左右.如常见的 ...

  3. 在PC上测试移动端网站和模拟手机浏览器的5大方法

    在PC上测试移动端网站和模拟手机浏览器的5大方法 来源:互联网 作者:佚名 时间:03-19 10:14:54 [大 中 小]                最近公司要开发网站的移动版,让我准备准备知 ...

  4. Opera浏览器测试移动端网站和模拟手机浏览器的方法

    链接地址:http://www.neirong.org/post-256.html?utm_source=tuicool Chrome浏览器请看:Chrome浏览器测试移动端网站和模拟手机浏览器的方法 ...

  5. Web 2.0 浏览器端可靠性测试第1部分(浏览器端可靠性测试的概念和背景)

    Web 2.0 是一个体现当代网络技术发展趋势的流行概念.它使得基于 Web 的信息交互和用户间协作性更加灵活和丰富.很多的社交网站.博客.wiki,都是 Web 2.0 技术的典型应用. 我们知道, ...

  6. curl命令用于模拟http浏览器发起动作

    1.模拟http浏览器发起访问百度首页的动作 curl  http://www.baidu.com 2.也可以模拟http浏览器发起POST动作,这个在测试后端程序时非常常见.

  7. python selenium Chrome模拟手机浏览器

    在做移动端页面测试时可以利用Chrome mobile emulation 辅助完成页面的适配问题,但是目前手机市场上的型号居多我们也没有办法通过人工的模式一一的去适配,所以这里考虑到通过自动化的模式 ...

  8. python selenium Chrome模拟手机浏览器(十七)

    在做移动端页面测试时可以利用Chrome mobile emulation 辅助完成页面的适配问题,但是目前手机市场上的型号居多我们也没有办法通过人工的模式一一的去适配,所以这里考虑到通过自动化的模式 ...

  9. 微信QQ打开网页时提示用浏览器打开

    微信QQ打开网页时提示用浏览器打开 一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示 二,功能实现 2.1 html实现 &l ...

随机推荐

  1. 【手记】MTK之TASK创建及使用

    首先来看看task的数据类型声明,在config\include\hal\task_config.h中对task和module类型进行了定义. /*************************** ...

  2. ---rk3288 mipi 整发(适用于新版的kernel 4.4 )

    http://www.pianshen.com/article/7245318143/ 老的Anroid 5.1 下 Linux 3.10 的数据的名字和 处理方式有不少不同 不过rk3128 还在走 ...

  3. laravel5.6中Session store not set on request问题如何解决

    先找到文件app下的Kernel.php文件,在文件中加入下列代码 protected $middleware = [ \Illuminate\Foundation\Http\Middleware\C ...

  4. MySql TIMEDIFF做计算之后,后台报Illegal hour value '24' for java.sql.Time type 问题

    页面需要显示这种格式:31:01:20 但是后台Springboot会提示Illegal hour value '24' for java.sql.Time type in value '24:00: ...

  5. Django中的视图(view)

    视图 1.什么是视图 视图就是Django项目下的view.py文件,它的内部是一系列的函数或者是类,用来专门处理客户端访问请求后处理请求并且返回相应的数据,相当于一个中央情报处理系统 2.具体视图实 ...

  6. CSS属性相关

    ·一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 二.字体属性 1.文字字体 font-family可以把多个 ...

  7. HTML基本入门完成

    四. (一)丶下拉框select元素:一般可以创建单选或多选菜单.<select>与<option>一般同时使用,select代表下拉框,option代表他的每一项. 1.基本 ...

  8. html 分页

    /*列表分页底部按钮*/ div.tablefooter{ color: #4f6d95; } select.pageLength{ border: 1px solid #d0daea; border ...

  9. linux 安装java环境

    1.检查是否安装或者linux系统自带jdK 命令:java -version 查找JDK相关包是否被安装: rpm -qa |grep jdk rpm -qa |grep gcj 删除JDK相关包: ...

  10. Web用户登录---验证码的设计与实现

    在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 验证码生成步骤:1.获得随机生成的颜色,画出随机线条生成背景底.2.String cod ...