移动端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 分 ...
随机推荐
- Unity 代码提示符和UGUI屏幕自适应
[Header]("提示字符") Canvas Scaler 屏幕自适应
- linux下启动tomcat时卡在Deploying web application directory
找到jdk1.x.x_xx/jre/lib/security/Java.security文件,在文件中找到securerandom.source这个设置项,将其改为: securerandom.sou ...
- 矩量母函数(Moment Generating Function，mgf，又称：动差生成函数)
在统计学中,矩又被称为动差(Moment).矩量母函数(Moment Generating Function,简称mgf)又被称为动差生成函数. 称exp(tξ)的数学期望为随机变量ξ的矩量母函数,记 ...
- js对象及函数(四)
一.对象1.函数对象的创建方法一:使用new构造函数去创建构造函数对象eg: var obj = new Object(); //向对象里面添加属性或方法 obj.name = 'nzc'; obj. ...
- 带有图标的MessageBox
MessageBoxUtils类的代码如下: Ext.define('org.pine.util.MessageBoxUtils', { singleton: true, /** 普通信息提示框 */ ...
- 四级CET大学词汇六级备份
Cet6六级中要考到法庭词汇的小故事 如何安排六级考试前的一个月1.每天按照我的要求去背单词2.做四套真题,词汇部分 只做词汇 3.做personal dictionary把真题中出现的所有不认识的 ...
- Spring AOP 原理的理解
>AOP基本概念 1)通知(Advice):织入到目标类连接点上的一段程序代码.通知分为五种类型: - Before:在方法被调用之前调用 - After:在方法完成后调用通知,无论方法是否执行 ...
- Telnet入侵Windows2000
开启Telnet 打开控制面板,管理工具 计算机管理 连接刚刚探测到的主机 输入探测到的主机IP 如下图所示,连接成功 找到Telnet服务 启动Telnet服务 远程登录 注意 Telnet登录需要 ...
- scrapy 图片管道学习笔记
使用scrapy首先需要安装 python环境使用3.6 windows下激活进入python3.6环境 activate python36 mac下 mac@macdeMacBook-Pro:~$ ...
- Python学习日记(二十六) 封装和几个装饰器函数
封装 广义上的封装,它其实是一种面向对象的思想,它能够保护代码;狭义上的封装是面向对象三大特性之一,能把属性和方法都藏起来不让人看见 私有属性 私有属性表示方式即在一个属性名前加上两个双下划线 cla ...