使用原生JS封装Tap事件，解决移动端300ms延迟

最新推荐文章于 2021-04-01 19:09:29 发布
最新推荐文章于 2021-04-01 19:09:29 发布
阅读量204 收藏 1
点赞数
原文链接：http://www.cnblogs.com/miumiu316/p/6846147.html
版权
 

为了防止误操作，移动端iOS操作系统针对原生click事件做了300ms的延迟，这在一定程度上影响了我们的使用体验。

GitHub项目地址：https://github.com/SimonZhangITer/MyTapEvent

FastClick

现在有现成的插件fastclick可以解决这个问题，但是也有弊端：

  • GitHub上最新版本的插件大小为25.4kb，轻量为趋势，能省则省。
  • 它的核心思想是取消默认的click时间，判断当前dom节点的类型进行相应的操作，这个判断过程较为繁琐。

MyTapEvent

本人最近在做微信项目，由于fastclick插件存在一定弊端，因此开发了一个简单的tap事件，主要思想有以下几点：

Thinking

  • 一次tap事件包含touchstart和touchmove(轻微移动)以及touchend三种状态
  • callback方法在touchend后执行
  • 根据chrome浏览器默认的判断取消点击的移动量，手指偏移量（水平或垂直）超过15px则判定为滚动，取消执行tap事件
  • 手指按下时间过长不视为点击，默认时间间隔为500ms
  • 使用HTMLElement来扩充原型，方便添加Event
  • 使用单例模式，确保只加载一次

ok，思想定下来，代码写起来就清晰多了：

if (!HTMLElement.prototype.addTapEvent) {
    HTMLElement.prototype.addTapEvent = function(callback) { var tapStartTime = 0, tapEndTime = 0, tapTime = 500, //tap等待时间，在此事件下松开可触发方法 tapStartClientX = 0, tapStartClientY = 0, tapEndClientX = 0, tapEndClientY = 0, tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量) cancleClick = false; this.addEventListener('touchstart', function() { tapStartTime = event.timeStamp; var touch = event.changedTouches[0]; tapStartClientX = touch.clientX; tapStartClientY = touch.clientY; cancleClick = false; }) this.addEventListener('touchmove', function() { var touch = event.changedTouches[0]; tapEndClientX = touch.clientX; tapEndClientY = touch.clientY; if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) { cancleClick = true; } }) this.addEventListener('touchend', function() { tapEndTime = event.timeStamp; if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) { callback(); } }) } }

Usage

HTMLElement.addTapEvent(function(){ //do something... }) 如： document.querySelect('#test').addTapEvent(function(){ alert('this is a tap event'); })

Case

这里给一个移动端案例，同时也包含了闭包的知识，前20项为tap事件，后30项为click事件，大家可以在手机上试一下效果，感受一下两种方法的差别：

<style media="screen"> li { padding: 20px; } </style> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no"> <meta name="x5-orientation" content="portrait"> <title>test</title> </head> <body> <ul></ul> </body> <script

转载于:https://www.cnblogs.com/miumiu316/p/6846147.html

weixin_30830327
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
zepto.js中tap事件阻止冒泡的实现方法
10-24
zepto.js是基于jQuery的轻量级JavaScript库，专为移动端优化，特别适合在移动设备上进行DOM操作和事件处理。在移动开发中，click事件常常有延迟，为了提高用户交互的响应速度，zepto.js提供了tap事件。tap事件类似于...
原生js--事件类型
weixin_34153893的博客
02-17 134
1、表单事件： submit事件 reset事件 click事件 change事件 focus事件（不冒泡） （IE和ES5支持冒泡的focusin） blur事件（不冒泡） （IE和ES5支持冒泡的focusout） input事件（ES5 textinput提供更方便的获取输入文字的方案）   2、Window事件 load事件 DOMContentLoaded事件 r...
原生封装的 tap 和 swipe 事件
yan_gogo的博客
07-06 560
function itcast(dom) { var obj = { tap: function (callback) { // 按下的时间 var startTime; // 开始的坐标 var startX, startY; // touchstart事件 dom.addEventListener("tou...
原生js封装tap
weixin_30273175的博客
08-06 97
// tap事件封装function tap(obj, callBack){ if(typeof obj != 'object') return; // 变量 var startTime = 0; // 记录触摸开始时间 var isMove = false; // 记录是否产生移动 obj.addEventListener('touchstart',fun...
封装tap事件
orangesnow2017的博客
08-16 487
知识点： 通过三种touch方法，计算触摸屏幕的时间，实现长按触发事件。 window.onload = function () { // 参数1dom // 参数2回调 fox_tap(document.body,function(e){ console.log('自己写的逻辑'); console.log(e); }) } /* 参数1:绑定的do
封装tap小插件
loushengyue
12-17 620
如果你看不明白以下代码，我建议你先看看js自调用匿名函数与内部实例化封装插件;(function (win, $) { //handle })(window, jQuery);
基于jQuery封装的tap事件插件
08-12
在触屏设备上，原生的`click`事件存在延迟，通常在用户触摸屏幕后会有约300毫秒的等待时间，这被称为"300ms点击延迟"。Tap事件插件就是为了解决这个问题，提供一个无延迟的触摸事件，使得用户体验更加流畅。 在传统...
百度 touch js 解决 移动端click点击事件
07-28
在移动设备上，由于浏览器需要识别用户是在进行双击操作还是单击操作，因此默认情况下，`click`事件会有一个约300毫秒的延迟。这对于需要快速响应用户操作的交互设计来说，是一个明显的不足。为了克服这个问题，...
移动端tap事件封装
m0_55041880的博客
04-01 253
移动端tap事件封装: 处理移动端的点击、长按和滑动操作(由于我们做的都是适配移动端的页面，因此不用考虑双击)，思路： 按下时记录手指的初始坐标和初始时间 touchmove事件函数中记录手指的当前坐标，并执行事件函数，用当前坐标 - 初始坐标 = 移动距离(X轴-X轴，Y轴-Y轴)来判断移动方向 手指抬起时touchend，记录结束时间，如果移动距离小于6像素(非移动事件时)执行点击事件，根据当前时间 - 初始时间 = 点击时长来判断是点击还是长按。 在这里插入代码片 function t
移动端封装tap事件理解（基于touch）
weixin_45086506的博客
07-22 253
在移动端上的click事件会在点击之后延迟300ms，用户体验不好，因此我们需要封装一个tap轻触事件，来提高用户体验（基于touch的封装） var bindTapEvent = function(dom,callback){ dom.addEventListener('touchstart',function(){ }); dom.addEventListener('touchmo...
解决 ios 上H5页面，click的300毫秒延迟问题
weixin_34406086的博客
11-03 411
为什么80%的码农都做不了架构师？>>> ...
在移动端封装一个自己的tap事件
BrightLD的博客
01-15 2198
事件-移动端 单手指事件： touchstart：手指按在屏幕上 touchmove：手指在屏幕上移动 touchend：手指离开屏幕 touchcancle ：手指操作取消（一般都是意外情况导致操作取消） 多手指事件： getsturestart：多手指按下 getsturechange：多手指位置改变 getstureend ：手指离开 getsturecancel：多手指操
JavaScript 移动端的tap事件
路虽远，行则必至！
08-11 6503
一、移动端的 tap 事件 移动端的单击事件，我们称为 tap 事件，也就是由手指单击所触发的事件。 二、单击事件的特征 单击事件的话，我们的 changedTouches.length = 1，即：TouchList {0: Touch, length: 1} 如果 changedTouches.length > 1，那就说明不止一根手指，进行触摸了。 三、获取触摸位置 我们在获取触摸开...
移动端JS之轻敲tap事件的封装
郭蕾蕾 努力的包子
11-02 6249
我们知道在移动端（这里小编还是强调一下把页面变成移动端页面千万别忘记视口属性viewport的设置）中我们的浏览器只认识三个事件（touchstart、touchmove、touchend）,而我们使用其他的框架封装的事件全都是使用这三个事件来封装来的，那么我们接下来就给大家拿一个实例来分析一下如何使用这三个基础的函数来进行封装！    好现在我们来分析一下整个函数封装的思路：如果是轻敲的话那必
4. js移动端点触(tap)事件
草木红的博客
03-22 1392
移动端本身就有click事件，但是该事件在touch事件之后发生，延迟时间为300ms，影响用户体验 tap事件（不是移动端原生事件，通过touch相关事件衍生过来） 使用tap事件，响应的速度比click要快 fastclick.js可以提高移动端click响应速度 <!DOCTYPE html> <html lang="en"> <head>...
【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度
weixin_34269583的博客
11-25 138
申明！！！最后发现判断有误，各位读读就好，正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题，其中一个问题是解决了点透还需要将原来一个个click变为tap，这样的话我们就抛弃了ie用户当然可以做兼容，但是没人想动老代码的，于是今天拿出了fastclick这个东西， 这是最近第四次发文说tap的点透事件，我们一直对解决“点透”的蒙版耿耿于怀，于是今天老大提出...
vue @tap事件之$event用法
热门推荐
qq_39757382的博客
11-01 2万+
html   &lt;span class="cha mui-badge mui-badge-success fr font14" @tap="Isinspect('普通参数',$event)"&gt;查岗&lt;/span&gt;   js端： function Isinspect(a,event) {       console.log(JSON.stringify( event.d...
移动端click事件默认300ms延时解决方案
weixin_44226088的博客
07-23 499
问题描述 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 3种解决方案 ​ 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scalable=no"> ​ 2.利用touch事件自己封装这个事件解决300ms 延迟。 原理 当我们手指触摸屏幕，记录当前触摸时间 当我们手指离开屏幕， 用离开的时间减去触摸的时间
微信小程序中如何把一个功能封装成组件？
最新发布
06-12
在微信小程序中，我们可以使用自定义组件来封装一个特定的功能，然后在需要使用该功能的地方引用该自定义组件即可。下面是实现自定义组件的基本步骤： 1. 创建一个新的文件夹，例如叫做my-component，然后在该文件夹下创建两个文件：my-component.js和my-component.wxml。 2. 在my-component.js文件中定义自定义组件的行为和数据。可以使用Component()函数创建一个自定义组件，例如： ``` Component({ properties: { text: { type: String, value: 'default text' } }, data: {}, methods: { onTap: function() { console.log('clicked'); } } }) ``` 上面的代码定义了一个名为my-component的自定义组件，其中包含一个名为text的属性和一个名为onTap的方法。 3. 在my-component.wxml文件中定义自定义组件的视图结构。例如： ``` <view class="my-component"> <text>{{text}}</text> </view> ``` 上面的代码定义了一个包含一个text组件的自定义组件。 4. 在需要使用该自定义组件的页面或者其他组件的wxml文件中引用该自定义组件。例如： ``` <my-component text="hello world" bind:tap="onTap"></my-component> ``` 上面的代码在当前页面中引用了my-component自定义组件，并且传递了一个text属性和一个tap事件处理函数。 这样，当页面或者组件显示时，my-component自定义组件就会根据定义的行为和视图结构来展现相应的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值