[ 面试没回答上的问题2]IOS上给body绑定click事件的bug

  面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路。

  这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari内核,所以ios浏览器全部中枪。

  bug描述

  在进行事件委托时,如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效,调试结果为事件响应到body子元素为止,既没有冒泡到body上,也没有被body所捕获。但如果事件是DOM元素本身具有的,则不会触发bug。换而言之,只有元素的非标准事件(比如click事件之于div)才会触发此bug。

  

  1. 如何避免bug触发:不要委托到body结点上,委托到任意指定父元素都可以,或者使用原生具有该事件的元素,如使用click事件触发就用a标签包一层。
  2. 使用touch事件代替click,如果是弹出层会有点透的问题存在。
  3. 已触发如何修补:safari对事件的解析非常特殊,如果一个事件曾经被响应过,则会一直冒泡(捕获)到根结点,所以对于已大规模触发的情况,只需要在body元素的所有子元素绑定一个空事件就好了,如:
    ("body > *").on("click", function(){};);
    

    可能会对性能有一定影响,但是使用方便,大家权衡考虑吧~~~

  

时间: 2024-10-13 13:28:05

[ 面试没回答上的问题2]IOS上给body绑定click事件的bug的相关文章

[面试没回答上的问题3]数组的去重

一个数组,怎么去除其中重复的项, 使用一个对象来储存当前元素是否重复来判断,如果重复就删除当前元素. /* 数组去重 */ function normalize(arr){ if(arr && Array.isArrat(arr)){ var i, len, map = {}; for(i = arr.length; i >= 0; --i){ if(arr[i] in map){ arr.splice(i, 1); } else { map[arr[i]] = true; } }

IOS设备上给body绑定click事件不生效及其解决办法

事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有data-tip属性的元素通过事件代理至body $('body').on('click','[data-tip]',function(e){ console.log($(this.).attr('data-tip')) }) 这样做在android和pc上都可以正常实现,但是在ios上面对部分标签尽然不

[面试没有回答上的问题4]常用字符串和数组的操作。

面试的时候有问到我如果用空格分割一个字符串,其实是一个很简单的问题,但是自己突然忘记了,这里做一个对字符串和数组操作的常用方法的一个简单的复习. 字符串部分 1.split(); split() 方法用于把一个字符串分割成字符串数组. 语法 : stringObject.split(separator, howmany) 参数 : separator 必需.字符串或正则表达式,从该参数指定的地方分割 stringObject.如果为("")空字符串,就表示字符串中每个字符都会被分割.

面试常见问题回答技巧

自己也是经过多次面试,总结了一些常见的面试技巧,这里参考<明哥聊求职>给出一部分面试技巧,希望对大家有帮助. 1.自我介绍 我是谁 我做过什么,我做成什么 我想做什么例:我非常看好贵公司和贵公司所在行业的发展前景,我非常热爱这个职业,愿意和贵公司一起成长.在工作中遇到很多问题,不过我还是成功地克服并达到了业务目标--这样会引导面试官提出'遇到哪些问题' 2.压力测试 案例一:如果我们公司这次没有录取你,但是过段时间被录取的人没通过试用期,这是再通知你,那么你还会来吗? 答:呵呵,说明我是一个替

面试官:请你实现一个大文件上传和断点续传

前言这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding 的编程题,当时虽然思路正确,可惜最终也并不算完全答对 结束后花了一段时间整理了下思路,那么究竟该如何实现一个大文件上传,以及在上传中如何实现断点续传的功能呢? 本文将从零搭建前端和服务端,实现一个大文件上传和断点续传的 demo 文章有误解的地方,欢迎指出,将在第一时间改正,有更好的实现方式希望留下你

安晓辉:程序员在公司没事干时候,做什么好?(产品上想多一点,设计上想多一点,技术上做深一点做宽一点,思维框架上学多一点)

(一)项目相关 做下面这些事情,可以让你更了解项目和所用技术: 看看项目的需求文档.设计文档,不要局限于你负责那个模块的,看整个项目的. 看看你在项目中用到的技术,自己掌握得如何,能否进一步提高,比如了解原理.阅读源码,重构自己的代码. 看看其他人的代码,尝试理解他的设计和所实现的功能. 看看别人用到的技术点.技术栈,尝试去了解. (二)个人成长 思考下面的问题,可以让你找到更多事情来做: 我个人想在技术上做到什么程度? 这个技术,团队里哪个人用得最好,好在哪里?我该如何做到像他那样? 产品预期

[转]iOS应用程序生命周期(前后台切换,应用的各种状态)详解

转载地址:http://blog.csdn.net/totogo2010/article/details/8048652 iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受到系统的很多限制,这样可以提高电池的使用和用户体验. //开发app,我们要遵循apple公司的一些指导原则,原则如下: 1.应用程序的状态 状态如下: Not running

GitHub 上排名前 100 的 IOS 开源库简介

主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 项目名称 项目信息 1. AFNetworking 作者是 NSHipster 的博主, iOS 开发界的大神级人物, 毕业于卡内基·梅隆大学, 开源了许多牛逼的项目, 这个便是其中之一, AFNetworking 采用 NSURLConnection + NSOperation, 主要方便与服务端 API 进行数据交换, 操作简单, 功能强大, 现在

iOS上new Date出现Invalid Date的问题,

用angular的ngModel绑定time的时候,在安卓调试没问题,没想到在iOS上出现了NaN:NaN,后台丢过来的数据大概是这样的2016-03-08 20:14 然而问题就出在这个分隔符"-"上,好像是因为safari没有实现这个标准吧,可以看这里 http://stackoverflow.com/questions/4310953/invalid-date-in-safari 所以可以这么实现,我截取自链接里的回答的: var myDate1 = Date.parseExac