移动端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 分 ...
随机推荐
- Vuecli3
第一步安装 npm install -g @vue/cli 第二步关于项目配置 因为cli3去除了cli2中index.html 转而存到了publi文件中 如果需要配置跨域 页面入口 打包文件路径都 ...
- 【Linux】Ubuntu替换阿里源
--------------------------------------------------------- 参考文章:https://www.jianshu.com/p/97c35d569aa ...
- 记一次node爬虫经历，手把手教你爬虫
今天业务突然来了个爬虫业务,爬出来的数据以Excel的形式导出,下班前一个小时开始做,加班一个小时就做好了.因为太久没做爬虫了!做这个需求都是很兴奋! 需求说明 访问网站 (循环)获取页面指定数据源 ...
- KIP-382: MirrorMaker 2.0
Status Motivation Public Interfaces Proposed Changes Remote Topics, Partitions Aggregation Cycle det ...
- IIS7 URL重写如何针对二级域名重写
二级域名与站点主域名是绑在同一目录下,想实现访问二级域名重写至站点下的某个目录. 如: 访问so.abc.cn 实际访问的是站点根目录下的search目录下的文件 相当于so.abc.cn绑定至s ...
- ADO.net（内置类区别）随记
Ado.net使用流程 SqlConnection->open->SqlCommand(sqlstring,conn)->(ExcuteNonQuery \ExecuteScalar ...
- 独热编码（One-Hot）的理解
https://www.imooc.com/article/35900 参考上面大神的原文,说的非常透彻.非常便于理解.感谢 感谢 自己做个小笔记,便于自己学习 特征值是离散的,无序的. 如: 性别特 ...
- Linux系统新手入门学习的四点建议
随着计算机的普及.互联网的发展,原本黑客手中的攻城利器---Linux,渐渐进入到普通群众的视线里,让越来越多的人接触到Linux,并学习Linux进而投身到Linux运维工作中去.如果大家对Linu ...
- RHEL6搭建网络yum源软件仓库
RHEL的更新包只对注册用户生效,所以需要自己手动改成Centos的更新包 一.查看rhel本身的yum安装包 rpm -qa | grep yum 二.卸载这些软件包 rpm -qa | grep ...
- AS shortcuts
stl => statelessstf => statefulalt+enter, select element => add pading or somethingselect c ...