参考：http://www.cnblogs.com/dojo-lzz/p/5452575.html

　　wap中的原生touch 事件，touchstart、touchmove、touchend、touchcancel，这些事件仅仅在移动端才会被触发，在pc端无效。而且在web中也没有PC的鼠标事件。两个端都存在click事件，但在web下会存在以下两个问题：

移动端click事件存在300ms延迟

　　因为网页中存在一种双击放大的操作，两次点击之间不超过300ms则认为是双击，所以浏览器为了区别是双击还是单击，单击的效果会有300ms延迟。了有更好的用户体验，需要自己利用以上的4个touch事件封装一些更快的点击事件（一般由touchstart以及touchend组成）其实也可以使用第三方库如zepto，使用里面封装的tab事件。或者使用插件 fastclick。

穿透现象

　　遮罩上绑定一个touchstart事件，触发就使遮罩消失，然后300ms后触碰点下的元素的click事件会被触发。原因也还是因为以上的300ms延迟。点击300ms发生后，浏览器寻找触碰点的顶层元素，然后触发一次click事件，大致过程如下：

e = document.elementFromPoint(x, y);

e.dispatchEvent('click');

　　以下代码会出现穿透现象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title></title>

</head>

<body>

<style>

    .splash{

        position: fixed;

        width: 100%;

        height: 100%;

        background-color: rgba(99,99,99,0.2);

    }

</style>

<div class="splash"></div>

<button onclick="console.log('click')">这是按钮</button>

<script>

    let splash = document.querySelector('.splash');

    splash.addEventListener('touchend',()=>{

        splash.style.display = "none";

    })

</script>

</body>

</html>

为了解决以上两个问题，需要自己封装web的点击事件，封装的思路如下：

  • touchstart和touchend组成一次点击事件，按下和抬起之间所移动的距离不得超过4px
  • 在捕获阶段，对click事件进行事件流拦截

移动web touch事件的更多相关文章

  1. 移动web——touch事件应用

    基本概况 1.touch事件在移动端被用来代替click事件,因为click事件的触发会延迟影响了用户体验 2.touch事件还可以与translate构成吸附效果 3.现行有一种排版方式是左边宽度是 ...

  2. 移动web——touch事件介绍

    基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个事件组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面 ...

  3. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  4. 移动端Web界面滚动touch事件

    解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...

  5. 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  7. 移动web开发之touch事件

    前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着An ...

  8. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  9. mobile touch事件

    touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的cl ...

随机推荐

  1. bzoj 3872: [Poi2014]Ant colony【树形dp+二分】

    啊我把分子分母混了WA了好几次-- 就是从食蚁兽在的边段成两棵树,然后dp下去可取的蚂蚁数量区间,也就是每次转移是l[e[i].to]=l[u](d[u]-1),r[e[i].to]=(r[u]+1) ...

  2. SSM报错：No converter found for return value of type: class java.util.ArrayList at org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor.writeWithMessageConverter

    我使用的是SSM框架,是在编写测试RESTFUL接口的时候出现, @RequestMapping(value = "/selectAll", method = RequestMet ...

  3. nginx媒体类型

    在服务器的响应头中,有Content-Type一行,表明传输的http媒体类型. 比如:txt文件就用text/plain 表明. conf/mime.type types { text/html h ...

  4. 哈密顿图 BestCoder Round #53 (div.2) 1003 Rikka with Graph II

    题目传送门 题意:判断是否为哈密顿图 分析:首先一种情况是不合法的:也就是度数为1的点超过2个:合法的有:,那么从度数为1的点开始深搜,如果存在一种走法能够走完n个点那么存在哈密顿路 收获:学习资料 ...

  5. 167 Two Sum II - Input array is sorted 两数之和 II - 输入有序数组

    给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数.函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2.请注意,返回的下标值(i ...

  6. [转]Intellij Idea自动添加注释的方法

    Intellij Idea自动添加注释的方法 阿历Ali 关注 2017.08.20 21:22* 字数 914 阅读 2741评论 0喜欢 6 程序媛阿历终于要写第一篇关于开发的文章了!!! 阿历用 ...

  7. 【学习笔记】彻底理解JS中的this

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  8. Java网络编程学习笔记

    Java网络编程,我们先来看下面这一张图: 由图可得:想要进行网络编程,首先是服务器端通过ServerSocket对某一个端口进行监听.通过accept来判断是否有客户端与其相连.若成功连上,则通过r ...

  9. android开发工具eclipse的安装与配置

    l开发主要应用Eclipse 3.7版本. l辅助工具为jdk.Androidsdk Android环境搭建   –1.1.JDK安装 –1.2.Eclipse安装 –1.3.Android SDK安 ...

  10. 洛谷 大牛分站 P1000 超级玛丽游戏

    题目背景 本题是洛谷的试机题目,可以帮助了解洛谷的使用. 建议完成本题目后继续尝试P1001.P1008. 题目描述 超级玛丽是一个非常经典的游戏.请你用字符画的形式输出超级玛丽中的一个场景. *** ...