前端开发在IOS端遇到的一个诡异问题(Delegate 失效)
2017-02-08 10:51
387 查看
一、前言
最近同事问到一个问题,一个前端页面在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
html,div,span,applet,object,iframe,h2,h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0 }
body>*:first-child { margin-top: 0 !important }
body>*:last-child { margin-bottom: 0 !important }
p,blockquote,ul,ol,dl { margin: 15px 0 }
h2,h3,h4,h5,h6 { margin: 20px 0 10px; padding: 0; font-weight: bold }
h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code { font-size: inherit }
h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000 }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { color: #777; font-size: 14px }
a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6 { margin-top: 0; padding-top: 0 }
h2+p,h3+p,h4+p,h5+p,h6+p { margin-top: 10px }
a { color: #4183C4; text-decoration: none }
a:hover { text-decoration: underline }
ul,ol { padding-left: 30px }
ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type { margin-top: 0px }
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0 }
dl { padding: 0 }
dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px }
dl dt:first-child { padding: 0 }
dl dt>:first-child { margin-top: 0px }
dl dt>:last-child { margin-bottom: 0px }
dl dd { margin: 0 0 15px; padding: 0 15px }
dl dd>:first-child { margin-top: 0px }
dl dd>:last-child { margin-bottom: 0px }
kbd { background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-style: solid; border-width: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 10px; padding: 1px 4px }
blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777 }
blockquote>:first-child { margin-top: 0px }
blockquote>:last-child { margin-bottom: 0px }
hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0 }
img { max-width: 100% }
.cj-img-container { text-align: center }
;
.cj-img-container img { max-width: 700px }
.cj-img { text-align: center }
.cj-img img { width: 50% }
#cnblogs_post_body img { max-width: 700px }
相关文章推荐
- IOS开发笔记之二十八——一个诡异的编译报错问题
- ios开发 CLLocationManager获取位置信息时遇到的一个小问题
- KindEditor使用过程中遇到的一个诡异的问题:form放在table中就失效
- 近期一个称重设备微信端开发前端知识点,及使用插件遇到的常见问题
- 在一个开源项目的开发中遇到的问题
- 在一个开源项目的开发中遇到的问题
- 遇到一个诡异的regedit.exe程序问题
- 在一个开源项目的开发中遇到的问题
- iOS开发的一个问题集锦
- 内文广告程序开发中遇到的一个问题
- vs2005开发qt程序时遇到的一个“奇怪”的问题
- 程式开发中导出数据到EXCEL中遇到的一个问题小解
- 在一个开源项目的开发中遇到的问题
- 在QT框架下开发MFC主程序的一个插件遇到的问题
- 最近开发遇到一个传值和引用问题 记录一下
- 今天遇到的一个开发问题 window.onload冲突
- 在一个开源项目的开发中遇到的问题
- 在一个开源项目的开发中遇到的问题
- 在一个开源项目的开发中遇到的问题
- 在一个开源项目的开发中遇到的问题