移动端tap事件(轻击、轻触)
一、问题
①移动端也有click点击事件，click点击会延迟200~300ms
②因为点击的响应过慢，影响了用户体验，所以需要解决响应慢的问题
二、解决方案
①使用tap事件：即轻击，轻敲，响应速度快（不是原生事件，是通过touch相关事件衍生过来的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tap事件</title>
<style>
.body{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;background: #ccc;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload=function(){
// 封装事件
bindTapEvent=function(dom,tapCallback,clickCallback){
var startTime=0;
var isMove=false;
dom.addEventListener('touchstart',function(e){
startTime=Date.now()
});
dom.addEventListener('touchmove',function(e){
isMove=true
});
dom.addEventListener('touchend',function(e){ if((Date.now()-startTime)<150 && isMove){
// 假设点击的时间间隔小于150ms为轻击事件
tapCallback && tapCallback.call(this,e)
}else{
// 假设点击的时间间隔大于150ms为点击事件
clickCallback && clickCallback.call(this,e)
}
startTime=0;
isMove=false;
});
}
// 调用
bindTapEvent(document.querySelector('.box'),function(e){
console.log('tap事件')
},function(e){
console.log('click事件')
})
}
</script>
</body>
</html>
②使用fastclick.js插件：可以提高移动端click响应速度，下载地址：https://github.com/ftlabs/fastclick
<script src="fastclick.js"></script>
<script>
// 当页面的dom元素加载完成
document.addEventListener('DOMContentLoaded',function(){
// 初始化方法
FastClick.attach(document.body);
},false);
// 正常使用click事件即可
</script>
具体用法可以参考：
移动端tap事件(轻击、轻触)的更多相关文章
- js移动端tap事件封装
这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...
- antd移动端onClick事件点击无效
最近空余时间比较多,自己想学习react跟移动端的东西,就选用了antd-mobile库,框架搭好开发过程中遇到个问题,里面绑定的点击事件无效,不仅是antd自带的按钮无效,原生button点击也没反 ...
- zepto.js 的tap事件中点击一次触发两次事件
html代码: <div class="xh-lxx-cart-count1"> <span class="minus">-</s ...
- 移动端tap事件的封装
/*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...
- 移动端tap事件，消除300毫秒延迟
引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用. 下面的代码直接复制就可以用啦. ( function(e ...
- 移动端WEB开发，click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
- iOS 轻击、触摸和手势的检测
一.检测捏合手势( UIPinchGestureRecognizer): //设定一个实例变量存储手指之间的其起始距离 @property (assign, nonatomic) CGFloat i ...
- 移动端click时间、touch事件、tap事件
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
随机推荐
- 从损失函数优化角度：讨论“线性回归（linear regression）”与”线性分类（linear classification）“的联系与区别
1. 主要观点 线性模型是线性回归和线性分类的基础 线性回归和线性分类模型的差异主要在于损失函数形式上,我们可以将其看做是线性模型在多维空间中“不同方向”和“不同位置”的两种表现形式 损失函数是一种优 ...
- server.port 在单元测试中，调用的类或者方法这个地方获取到的端口号就会变成-1
@Value("${server.port}") 本文链接:https://blog.csdn.net/weixin_38342534/article/details/886985 ...
- .NET Core随笔把数据库数据查出来转JSON并输出
直接创建WEB项目即可: public class Startup { //startup.cs是站点启动时具体做了哪些事情,主要是开启了一个mvc服务. public Startup(IConfig ...
- 洛谷【P1048 采药】题解
题目链接 分析:典型的01背包问题,设dp[i][j]为空间(也就是题面中的时间)是j的背包在装前i个物品(草药)所得的最大价值,v[i]为第i个物品的重量(采药的时间),w[i]为第i个物品(草药) ...
- 笔谈AudioToolbox（一）
“五一”长假过的真快,三天就这么过去了.新的一周开始了,这周搞搞iOS平台上音频的解码与播放.动手咯,切入AudioToolbox.framework的学习,这个库太强大了,要想彻底弄懂不简单,从某种 ...
- json模块中dumps()与dump()区别
dumps是将dict转化成json字符串格式,loads是将json字符串转化成dict格式. dump和load也是类似的功能,只是与文件操作结合起来了. dump(写入内容,文件对象) 和loa ...
- JavaScript: 详解正则表达式之三
在上两篇文章中博主介绍了JavaScript中的正则常用方法和正则修饰符,今天准备聊一聊元字符和高级匹配的相关内容. 首先说说元字符,想必大家也都比较熟悉了,JS中的元字符有以下几种: / \ | . ...
- ssm的maven项目启动tomcat时报错，Cannot find class: XXXX解决办法
最近在写一个ssm的项目,启动总是报错.原因网上查了也没找到.最后终于解决.下面直接上代码 问题描述: 严重: Allocate exception for servlet ssm-dispatche ...
- 今天看了《SOFT SKILLS The Software Developer's Life Manual》有感
从第四篇生产力开始看的,书中提到了专注,待续
- Pthon魔术方法（Magic Methods）-可调用对象
Pthon魔术方法(Magic Methods)-可调用对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.可调用对象方法 __call__: 类中定义一个该方法,实例就可以像 ...