前端开发在IOS端遇到的一个诡异问题(Delegate 失效)
一、前言
最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展。今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路。这是关于JQuery 中的 delegate 和 on 给动态元素绑定事件触发不了的问题。文章以下只用 delegate 举例。
二、JQuery 的 delegate 作用。
首先我们来了解一下 Delegate 的作用。一句话带过:“给动态添加的元素绑定事件”
看图:
下面九个测试按钮是通过点击上面的 “添加测试按钮” 按钮添加的。这就是动态添加元素的概念。接下来需求为每个添加的测试按钮都有统一的处理事件。这边作为测试,当点击时输出 “你点击了+按钮名称” 信息。 按平时绑定事件的方式,.click() 或者 on('click') 等等这些方式。代码如下
$(function(){
//“添加测试按钮” 按钮点击事件,测试按钮 class 为 new-btn
$("#add-btn").click(function(){
var test_btn_count = $('#btn-line button').size();
var new_btn_html = '<div class="new-btn btn">测试按钮'
+ (test_btn_count + 1)
+'</div>';
$('#btn-line').append(new_btn_html);
}); //用普通的click 绑定事件。很遗憾,没任何反应
$('.new-btn').click(function(){
console.log('你点击了按钮:'+$(this).text());
})
})
效果如图:
接下来我们将普通的绑定事件换成 delegate ,代码如下:
//btn-line 为存放 new-btn 的容器
$('.btn-line').delegate('.new-btn','click',function(){
console.log('你点击了按钮:'+$(this).text());
})
delegate 效果
至此,Delegate 解决了动态元素的事件绑定问题。
三、JQuery Delegate 在 IOS 系统中失效问题
上面好像已经实现了我们要的需求,但事实证明真正的坑还在后面。现在 Chrome 下面的 IOS模拟器下面全部正常。但是当项目正在跑在真机上,点击测试按钮又失去了反应。为了在手机上看到效果,我们先把 console.log 换成 alert
$('.btn-line').delegate('.new-btn','click',function(){
alert('你点击了按钮:'+$(this).text());
})
结果是界面直接懵圈了。
点击没有任何的 alert 信息
针对这个问题开始了搜索之旅,功夫不负有心人(其实不难搜到)。一切诡异的问题后面都会有一个神奇的解决方案。
给动态添加的 new-btn 添加 css cursor属性
.new-btn{
cursor: none;
}
神奇地好了
网友对此的回答如下:
其实苹果对于性能的要求是近乎苛刻的,这样的特性应该是苹果为了节省性能开销而产生的一个bug。如果没有可点的特性的元素系统默认不会给它响应事件。而我们添加的这个 cursor 属性就是让元素看起来是可以点击的,也就向操作系统指明这个元素是需要响应事件的。
也就是说,想要一劳永逸,给body 添加 cursor:pointer 样式属性。或者按照网友提供的方法,通过js判断当前是否为苹果设备,如果是则加上。
代码如下:
if(/ip(hone|od)|ipad/i.test(navigator.userAgent)){
$("body").css("cursor","pointer");
}
其实我到时觉得css代码更干脆
body{
cursor:none;
/*cursor:pointer;*/
}
//或者
*{
cursor:pointer;
}
但是直接给body或者是给 * 添加这个属性都违背了苹果节约性能开销的初衷,最好的方式还是直接给需要响应事件的元素添加 cursor 属性.
.yourElementClass{
cursor:pointer;
}
限于笔者技术,文章观点难免有不当之处,希望发现问题的朋友帮忙指正,笔者将会及时更新。也请转载的朋友注明文章出处并附上原文链接,以便读者能及时获取到文章更新后的内容,以免误导读者。笔者力求避免写些晦涩难懂的文章(虽然也有人说这样显得高逼格,专业),尽量使用简单的用词和例子来帮助理解。如果表达上有好的建议的话也希望朋友们在评论处指出。
本文为作者原创,转载请注明出处! Cboyce
前端开发在IOS端遇到的一个诡异问题(Delegate 失效)的更多相关文章
- web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
- Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05 0个评论 来源:Safari ...
- Web前端开发与iOS终端开发的异同
语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...
- Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)
前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...
- 【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem
! function() { var style = document.createElement("STYLE"), docEl = document.documentEleme ...
- JavaEE开发之记事本完整案例(SpringBoot + iOS端)
上篇博客我们聊了<JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎>,并且在之前我们也聊了<Swift3.0服务端开发(五) 记事本的开发(iO ...
- iOS端IM开发从入门到填坑
让App聊起来 IM开发从入门到填坑Demo IM的实现方式 拿来主义,使用第三方IM服务 IM的第三方服务商国内有很多,底层协议基本上都是基于TCP的,类似有网易云信.环信.融云.极光IM.Le ...
- 前端开发各种cross之cross domain
作为一个苦逼前端开发工程师,不得不面对各种cross,比如面对五花八门的浏览器我们必须cross browser,面对各种终端,我们必须cross device,在这么多年的前端开发经历中,在不同的域 ...
- web前端开发-博客目录
web前端开发是一个新的领域,知识连接范围广,处于设计与后端数据交互的桥梁,并且现在很多web前端相关语言标准,框架库都在高速发展.在学习过程中也常常处于烦躁与迷茫,有时候一直在想如何能够使自己更加系 ...
随机推荐
- CodeForces 620A Professor GukiZ's Robot
水题 #include<cstdio> #include<cstring> #include<cmath> #include<stack> #inclu ...
- Linux下gcc编译生成动态链接库*.so文件并调用它 是转载的
动态库*.so在linux下用c和c++编程时经常会碰到,最近在网站找了几篇文章介绍动态库的编译和链接,总算搞懂了这个之前一直不太了解得东东,这里做个笔记,也为其它正为动态库链接库而苦恼的兄弟们提供一 ...
- (简单) POJ 1860 Currency Exchange,SPFA判圈。
Description Several currency exchange points are working in our city. Let us suppose that each point ...
- ZOJ 3923 Handshakes
水题. 算一下每个人和之前的人握手次数+之后的人和这个人握手次数.取最大值. #include<cstdio> #include<cstring> #include<cm ...
- SocketChannel
Java NIO 中的 SocketChannel 是一个连接到 TCP 网络套接字的通道.可以通过以下 2 种方式创建 SocketChannel: 打开一个 SocketChannel 并连接到互 ...
- 74HC166与TPIC6A595分析(转)
源:Atmega162串行外设接口SPI 一.Atmega162的SPI接口基本概念与工作原理 SPI接口的全称是"Serial Peripheral Interface",意为串 ...
- VB.NET中网络编程所需组件WinHTTP的添加
VB.NET中网络编程所需组件: WinHTTP组件:项目-->添加引用-->COM选项卡-->Microsoft WinHTTP Services,version 5.1--> ...
- 【Xilinx-Petalinux学习】-05-OpenCV程序测试
占位, 通过上一次编译的opencv库,运行程序,实现图像处理
- scrollview嵌套gridview滑动问题
在开发过程总遇到ScrollView嵌套GridView,由于这两种控件都带有滚动条,当他们碰到一起的时候便会出问题,问题是gridview不滚动,并且只显示两行,为此看了官方文档,谷歌回答滚动里面没 ...
- java 对象比较
class Book{ private String title ; private double price ; public Book(String title , double pr ...