tap事件

tap事件,也是轻击、轻触事件，其特点是响应速度快，在移动端也有click事件（在移动为了区分是滑动还是点击，click点击延时300ms），可这样影响用户体验，响应太慢了。为了解决这个问题，引入了tap事件

原理

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Title</title><style>body {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background: pink;float: left;}</style></head><body><div class="box"></div><script>window.onload = function () {/*使用tap事件*//*1. 响应的速度比click要快   150ms *//*2. 不能滑动*/// 封装tap事件var bindTapEvent = function (dom, callback) {/*事件的执行顺序*//*在谷歌浏览器模拟看不到300ms的效果*//*在真机上面才能看看到延时效果*/var startTime = 0;var isMove = false;dom.addEventListener('touchstart', function () {startTime = Date.now();});dom.addEventListener('touchmove', function () {isMove = true;});dom.addEventListener('touchend', function (e) {console.log((Date.now() - startTime));if ((Date.now() - startTime) < 150 && !isMove) {callback && callback.call(this, e);}// 重置参数startTime = 0;isMove = false;});}bindTapEvent(document.querySelector('.box'), function (e) {console.log(this);console.log(e);console.log('tap事件')});}</script></body></html>

fastclick

fastclick的思路就是利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件，分发到事件源（相当于主动触发一次click），同时阻止掉浏览器300ms后产生的click。

总的来说就是提供移动端click响应速度的

下载

fastclick

使用

        <script src="../js/fastclick.min.js"></script><script>/*当页面的dom元素加载完成*/document.addEventListener('DOMContentLoaded', function () {/*初始化方法*/FastClick.attach(document.body);}, false);/*正常使用click事件就可以了*/</script>

移动端的tap事件你知道多少相关推荐

JavaScript 移动端的tap事件
一.移动端的 tap 事件移动端的单击事件,我们称为 tap 事件,也就是由手指单击所触发的事件. 二.单击事件的特征单击事件的话,我们的 changedTouches.length = 1,即: ...
移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
移动端的touch事件详解
移动端的touch事件触摸事件的起源随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动 ...
移动端为何不使用click而模拟tap事件及解决方案
移动端为何不使用click而模拟tap事件及解决方案参考文章: (1)移动端为何不使用click而模拟tap事件及解决方案 (2)https://www.cnblogs.com/ranyonsue/ ...
fastclick.js移动端WEB开发，click,touch,tap事件浅析
建议看看:http://www.cnblogs.com/yexiaochai/p/3442220.html 一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 ...
移动端WEB开发，click,touch,tap事件浅析
2019独角兽企业重金招聘Python工程师标准>>> 一.click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用ta ...
HTML5触摸事件演化tap事件
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
4. js移动端点触(tap)事件
移动端本身就有click事件,但是该事件在touch事件之后发生,延迟时间为300ms,影响用户体验 tap事件(不是移动端原生事件,通过touch相关事件衍生过来) 使用tap事件,响应的速度比cl ...
手机html5 tap事件,HTML5触摸事件演化tap事件介绍
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...

移动端的tap事件你知道多少

tap事件

原理

fastclick

下载

使用

移动端的tap事件你知道多少相关推荐

最新文章

热门文章