关于移动端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 这种小屏幕浏览桌面端站点 ...
随机推荐
- Xcode-显示代码行数
在Xcode菜单中选择Preferences命令,单击Text Editing选项图标,选中Linenumbers复选框.(快捷键苹果键+逗号打开preferences --> Text Edi ...
- Android 学习笔记之数据存储SharePreferenced+File
学习内容: Android的数据存储.... 1.使用SharedPreferences来保存和读取数据... 2.使用File中的I/O来完成对数据的存储和读取... 一个应用程序,经常需要与用 ...
- UNIQUEIDENTIFIER列上的统计信息
UNIQUEIDENTIFIER列上的统计信息非常有意思,在它上面有一些很令人讨厌的行为.我们来看下. 问题重现(The repro) 为了向你展示我们刚抱怨的行为,我用下列简单的表定义创建了一个数据 ...
- js-基础(1)
js-基础(1) javascript由三部分组成:核心,DOM,BOM核心——ECMAScript,可以运行浏览器/单纯的JS引擎 console.log(‘hello’);DOM——操作HT ...
- Django--BBS项目
需求 模仿抽屉()和虎嗅()做一个网站bbs 知识点 Django知识: models表字段第一个属性可以用 2 3 from django.contrib.auth.models import Us ...
- Java魔法堂:打包知识点之jar
一.前言 通过eclipse导出jar包十分方便快捷,但作为码农岂能满足GUI的便捷呢?所以一起来CLI吧! 二.JAR包 JAR包是基于ZIP文件格式,用于将多个.java文件和各种资源文件, ...
- android 获取当前位置
1. Android开发位置感知应用程序方式:1. GPS 定位 精确度高,仅适用于户外,严重消耗电量.如果手机内置GPS接受模块,即使手机处于信号盲区,依然可以获取位置信息. 2. NETW ...
- 重构第5天:提升字段(Pull Up Field)
理解:提升字段和前面讲解的方法提公很类似,可以说方式都是一样的.就是把继承类中经常用到的字段,提出来 放到基类中,达到通用的目的.提高代码重用性和可维护性. 详解:如下重构前的代码: using Sy ...
- zTree的使用
一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type=" ...
- 开发(ASP.NET程序)把写代码写至最有面向对象味道
前几天,搬房子时又拿起<重构----改善既有代码的设计>这本书来随便翻来看下,重构Refactoring在开发时,是时常也经常会使用得到. 她确实教我们怎样把写程序写简洁,清楚 好明白,好 ...