我使用AngularJS 1.4.7
我有可编辑的输入.如果我们专注于输入并在此输入字段之外单击后,脚本将在ng-blur中执行“save()”功能.一切正常,但在iPhone 5/6和iPad上无法正常工作(不能在ng-blur中执行任何操作).我不知道为什么,但我推断这个问题是焦点/触摸动作.有人知道问题出在哪里？
解决方法:
修复ng-blur无法处理空白空间和大多数iOS元素
目标
在我的应用中,我们想要在点击时隐藏打开的菜单或搜索结果
菜单或搜索框.
问题
单击远离当前元素时,iOS Safari无法正常模糊.
注意
您不需要特殊指令.问题不在于ng-blur,它工作正常.问题在于,由于Apple在iOS上的不寻常设计,无论是否使用ng-blur或原生DOM模糊事件,都不会发生模糊事件.
发行原因
Apple设计了移动Safari来执行事件冒泡,这与桌面浏览器不同.根据官方Apple文档,如果单击的元素没有附加单击侦听器,则不会触发任何单击事件.如果没有单击事件,焦点不会更改并且不会发生模糊事件,因此即使用户确实单击了页面上的其他位置,当前元素也不会失去焦点.
只有当用户单击带有单击事件侦听器的元素时,才会出现模糊.某些元素(如超链接和输入)具有用于单击的“内置”事件侦听器,因此将始终注册单击,从而导致模糊工作.
通常在桌面浏览器中,无论元素的DOM层次结构中是否存在已注册的侦听器,都会盲目触发click事件.这就是为什么ng-blur在桌面浏览器中按预期工作,即使在“空白空间”也是如此.
Apple表示,对于iOS Safari,只有在找到注册的元素才能收听该事件时,他们才会调度该事件.
Apple的文档听起来像是在寻找已注册的事件监听器并在目标元素上处理,但事实并非如此.我在下面的文章中找到了答案,更重要的是,它给出了一个评论.
Quirksmode Article on iOS event delegation
首先,观察如果目标元素没有单击事件侦听器和处理程序,则在iOS上安装侦听器不会导致在事件上调度click事件.它适用于大多数浏览器,但不适用于iOS.
似乎Apple正在检查DOM层次结构,直到< body>在分派点击事件之前标记,但未检查< body>标签或以上.因此,您需要一个附加到< body>下面某个元素的click事件监听器.
那么解决方案非常简单.您需要做的就是将所有页面内容包装在< body>正下方的“主”容器元素中.元素,并将侦听器放在那里而不是在主体或文档上.它甚至可以是一个空的处理函数. Apple仅检查是否已注册.包装所有内容的原因是,无论用户点击的页面在哪里,起泡过程最终都会到达主容器.
如果你这样做,那么ng-blur将在iOS中按预期工作,因为空白空间上的click事件(没有click事件监听器的元素)将在找到父容器的click事件监听器和click事件时通过iOS检查将被正常发送,就像在任何其他浏览器中一样.
警告
此解决方案有效地使iOS Safari在每个DOM元素的层次结构上看到一个单击事件侦听器,诱使它在每个元素上调度click事件,就像普通的浏览器一样.我不知道Apple是否有性能原因他们在iOS中避免这种情况,或者它只是美学/开发者类型偏好(参见示例).您将使用此变通方法更改应用中的默认iOS行为.
