移动浏览器点击事件的问题
2023-04-18 14:48:39 时间
大家都知道移动端的程序中,是没有点击事件的,只有 touchstart、touchmove、touchend。
利用jquery这样写的话,也可以,但是当你点击按钮的单击事件时,将 会等待大约300ms的时间。这是因为,浏览器是等着看,如果你是真正执 行双击。
如下代码所示,就会延时300ms:
$("#sid").click(function(){
console.log(111);
});
ps:在移动浏览器端,你会发现,当你点击某个区域的点击事件时,你会
发现,边框周围有个阴影一闪而过,如何解决?看下面
解决方案:(1)利用singleTap来实现
首先,要引入zepto.min.js文件
$("#sid").on("singleTap",function(e){
if(!$(e.target).hasClass("btn")){
e.stopPropagation();
console.log(111);
}
});
ps:此时你在看看是否有所变化
插入点小知识:
Single tap跟press的区别
single tap是按一下,就一下,按了就拿起来
press就是按,可以按一会,按一下,按很久,按到你开心~。。。。
介绍下按键:
press,release,single tap,double tap,triple tap
press就是按么,
release就是松开,
single tap就是按一下,
double tap就是按两下,
triple就是三下哈哈哈~~~
解决方案:(2)使用FastClick插件 地址:http://www.uedsc.com/fastclick.html
解决方案:(3)点击和滑动之间有一个本质的区别就是 touchmove(mousemove),在手机端,只需要判定是否触发这一点即可:
var flag = false;
var $selector = $('#selectorID');
$selector.on('touchstart touchmove touchend', function(event) {
switch(event.type) {
case 'touchstart':
falg = false;
break;
case 'touchmove':
falg = true;
break;
case 'touchend':
if( !falg ) {
console.log('点击');
} else {
console.log('滑动');
}
break;
}
});
相关文章
- Python Turtle绘图[难度2星]:奥运五环(用最简单的方法实现五环套接)
- Treevalue(0x03)——函数树化详细解析(下篇)
- Salesforce Flow(二)如何利用ApexClass取得后台数据
- 【编程一生】2021年总结--数据可视化技巧
- idea运行main方法或Test避免编译整个应用的方法
- 【技术种草】腾讯云搭建Drawpile绘画联机服务器
- go-admin框架分析—(终)
- C#字符串相关方法与字符数组的转换
- Spring认证中国教育管理中心-Spring Data Redis框架教程二
- 声明并运行了线程01并等待结果
- fflush()函数
- 为什么人工智能被认为是机遇而不是危险?
- c#中的判断语句
- 移除C盘外的Program Files和WindowsApps文件夹
- C语言课程设计题目介绍(10个标准题目)
- 一文读懂 Spring Bean 的生命周期
- CSS 3.0实现加载动画
- 软考中级-软件设计师 复习指南(2021年11月已通过)
- CSS 3.0实现泼墨画
- C盘满了,清理C盘常用步骤!