关于移动端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 这种小屏幕浏览桌面端站点 ...
随机推荐
- 【转载】SHELL字符串处理技巧(${}、##、%%)
转载自:http://www.cnblogs.com/pmars/archive/2013/02/17/2914444.html 在SHELL编程中,经常要处理一些字符串变量.比如,计算长度啊.截取子 ...
- linux常见进程与内核线程
发现大量jdb2进程占用io资源.jdb2进程是一个文件系统的写journal的进程 kthreadd:这种内核线程只有一个,它的作用是管理调度其它的内核线程.它在内核初始化的时候被创建,会循环运行一 ...
- ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页
我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...
- C#设计模式——观察者模式(Observer Pattern)1
一.概述在软件设计工作中会存在对象之间的依赖关系,当某一对象发生变化时,所有依赖它的对象都需要得到通知.如果设计的不好,很容易造成对象之间的耦合度太高,难以应对变化.使用观察者模式可以降低对象之间的依 ...
- C#利用NPOI导出Excel类(简单版)
代码: using System.Data; using System.IO; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; namespac ...
- ASP.NET的简单与面向对象开发
ASP.NET开发,一开始是为了超赶时间完成任务,只能把功能实现即可.如下面一个功能,在网页中有一个铵钮,用户点一点切换网页的图片,再点一点又切换回来.我们要怎样做?在铵钮事件中去变更图片的路径即可. ...
- 与众不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl
[源码下载] 与众不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl 作者:webabcd 介绍与众不同 windows p ...
- NFS客户端访问行为相关的几个参数解释
soft / hard Determines the recovery behavior of the NFS client after an NFS request times out. If ne ...
- ajax跨子域请求的两种现代方法
因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...
- mysql awr v1.0.2发布
改进说明: 1.新增监控Mysql实例通过web控制台http://ip:port/hosts.html进行,无需更改mysql-jdbc.properties配置文件和spring-servlet. ...