移动端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 分 ...
随机推荐
- golang --写test测试用例
安装gotests插件自动生成测试代码: go get -u -v github.com/cweill/gotests/... 如何编写测试用例 由于go test命令只能在一个相应的目录下执行所有文 ...
- Scala 系列（一）—— Scala 简介及开发环境配置
一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...
- Ambari深入学习（I）－系统架构
Ambari是hadoop分布式集群配置管理工具,是由hortonworks主导的开源项目.它已经成为apache基金会的孵化器项目,已经成为hadoop运维系统中的得力助手,引起了业界和学术界的关注 ...
- (转)微服务_创建一个简单的Eureka注册中心
原文地址:https://www.cnblogs.com/lplshermie/p/9105329.html 微服务和分布式已经成了一种极其普遍的技术,为了跟上时代的步伐,最近开始着手学习Spring ...
- K8S使用问题汇总
1,报错如下 Warning: kubectl apply should be used on resource created by either kubectl create --save-con ...
- SpringBoot开发验证码功能
简介 验证码主要是用来防止恶意破解密码.刷票.论坛灌水.刷页.Kaptcha 是一个可高度配置的实用验证码生成工具,使用也很简单,这里就使用它来做验证码. 另外使用JAVA原生的API也可以实现验证码 ...
- win10下jupyter修改默认路径的办法
查了很多资料,发现都不管用,最后亲测找到一种方法. 实现的方法就是修改快捷方式标签的目标栏,如下图: 后面有一个%USERPROFILE% 将%USERPROFILE%改成你要的路径就可以了 然后应用 ...
- JBOOT使用总结
@Override public SwAdmin findById(long id) { return DAO.findFirst("SELECT * FROM sw_admin WHERE ...
- 科普帖：Linux操作系统
使用计算机必然会接触操作系统,现代操作系统已经发展的十分成熟,一般用户都可以很轻松的使用计算机.然而,对于要利用计算机进行专业开发和应用的用户来说,需要更加深入地理解操作系统的原理和运行机制,这样才能 ...
- 内部属性[[class]]
1. 对象的[[class]]属性 所有typeof返回值为“object”的对象(如数组)都包含一个内部属性[[class]],这个属性无法直接访问,一般通过Object.prototype.toS ...