关于移动端click事件绑定的一个细节
click是最常见的点击事件,但是对于移动终端,比如手机,一般都是以touch事件代替的,而click事件在手机也是生效的,只是会有1-2秒左右的延迟,那么当你想要用click而非touch事件的时候,该如何处理事件绑定的呢,不用说,为了阻止事件冒泡,以及动态加载出来的DOM元素也绑定点击事件,肯定是这样使用的:
$('body').on('click','#btn',function(){ alert(1); })
好了,在pc浏览器模拟手机环境中测试没问题,在安卓手机中实测也是没问题,但是到了iPhone手机中,问题来了,他并没有任何反应,也就是不会触发alert事件,当你把click事件改成touch事件,就正常了。
但是,我的问题并不是如此,我touch绑定了其他事件,我就是要用click,怎么办,难道针对iPhone再写一个点击事件的代码?那万一你一套页面中有很多点击事件,岂不是要一个个的再写,很累,解决办法很简单,我也是百度来的,只需要对你要点击的那个目标,也就是#btn这个id加上一个css属性,cursor:pointer,问题迎刃而解。
再试一下,iPhone和安卓都完美兼容。
关于移动端click事件绑定的一个细节的更多相关文章
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端click事件延时
在移动端使用click事件会产生300ms的延迟 问题的产生: 移动端存在双击放大的问题,所以在移动端点击事件发生时,为了判断用户的行为(到底是要双击还是要点击),浏览器通常会等待300ms,如果30 ...
- 苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
随机推荐
- python函数式编程
函数式编程是使用一系列函数去解决问题,按照一般编程思维,面对问题时我们的思考方式是“怎么干”,而函数函数式编程的思考方式是我要“干什么”. 至于函数式编程的特点暂不总结,我们直接拿例子来体会什么是函数 ...
- yousa_team团队项目——兼职平台网站 工作进度
4月31 初步设计网站界面,功能以及数据库关系图 网站包括登陆注册界面,商家和学生都有个人主页,查看兼职信息界面和反馈界面,管理员有查看反馈界面,查看兼职市场,管理后台界面 登录注册界面实现用户的登陆 ...
- 直接拿来用!最火的iOS开源项目
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是G ...
- CentOS6.5菜鸟之旅:安装Realtek无线网卡驱动
一.前言 CentOS6.5不像CentOS7和Unbuntu那样自动安装好了无线网卡驱动,因此需要我们折腾一下. 二.安装前的准备工作 [a] 检查无线网卡驱动的安装情况(通过查看网络接口的安装 ...
- 在VS中使用TinyFox调试OWIN应用(转)
在很早一段时间之前,我曾经写过一篇关于Katana的使用方法的文章<如何安装并简单的使用OwinHost——Katana>,上面就有介绍如何在VS中调试使用Katana作为Host的App ...
- Parameter配置文件获取
public class ConfigInfo { public static ParametersHelper Parameters { get { return new ParametersHel ...
- IOS开发UI基础UIImagePickerController的属性
UIImagePickerController 1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType ...
- VC包含目录、附加依赖项、库目录及具体设置
包含目录:#include <headerfile.h>中headerfile.h的搜索目录.如果有XXX.h找不到,设置这个目录可以解决. 附加依赖项:C++的库会把函数.类的声明放在* ...
- C#设计模式——适配器模式(Adapter Pattern)
一.概述在软件开发中,常常会想要复用一个已经存在的组件,但该组件的接口却与我们的需要不相符,这时我们可以创建一个适配器,在需复用的组件的接口和我们需要的接口间进行转换,从而能够正常的使用需复用的组件. ...
- 微信公众平台入门开发教程.Net(C#)框架
一.序言 一直在想第一次写博客,应该写点什么好?正好最近在研究微信公众平台开发,索性就记录下,分享下自己的心得,也分享下本人简单模仿asp.net运行机制所写的通用的微信公众平台开发.Net(c#)框 ...