Angular - iPhone/iPad上的ng-blur问题

我用 AngularJS 1.4.7

我有可编辑的输入.如果我们专注于输入后,点击该输入区域外,脚本会做功能"save()"在ng-blur.一切都正常工作,但iPhone 5/6并iPad不起作用(在不执行任何东西ng-blur).我不知道为什么,但我推断出这个问题在focus/touch起作用.有人知道问题出在哪里？

修复ng-blur无法处理空白空间和大多数iOS元素

目标

在我的应用程序中,我们希望在单击菜单或搜索框时隐藏打开的菜单或搜索结果.

问题

单击远离当前元素时,iOS Safari无法正常模糊.

注意

您不需要特殊指令.问题不在于ng-blur,它工作正常.问题是,由于Apple在iOS上的不寻常设计,无论是否使用ng-blur或原生DOM模糊事件,都不会发生模糊事件.

发行原因

Apple设计了移动Safari来执行事件冒泡,这与桌面浏览器不同.根据官方Apple文档,如果单击的元素没有附加单击侦听器,则不会触发任何单击事件.如果没有单击事件,焦点不会更改并且不会发生模糊事件,因此即使用户确实单击了页面上的其他位置,当前元素也不会失去焦点.

只有当用户单击带有单击事件侦听器的元素时,才会出现模糊.某些元素(如超链接和输入)具有用于单击的"内置"事件侦听器,因此将始终注册单击,从而导致模糊工作.

通常在桌面浏览器中,无论元素的DOM层次结构中是否存在已注册的侦听器,都会盲目触发click事件.这就是为什么ng-blur在桌面浏览器中按预期工作,即使在"空白空间"也是如此.

Apple表示,对于iOS Safari,只有在找到注册的元素才能收听该事件时,他们才会调度该事件.

Apple Docs - 转到图6-4

Apple的文档听起来像是在寻找已注册的事件监听器并在目标元素上处理,但事实并非如此.我在下面的文章中找到了答案,更重要的是,它给出了一个评论.

关于iOS事件委托的Quirksmode文章

首先,观察如果目标元素没有单击事件侦听器和处理程序,则在iOS 上安装侦听器不会导致在事件上调度click事件.它适用于大多数浏览器,但不适用于iOS.

看来,苹果正在检查DOM层次最高的调度click事件标记之前,但不检查标签或以上.因此,您需要一个附加到元素下方某个元素的click事件监听器.

解决方案/解决方法

那么解决方案非常简单.您需要做的就是将所有页面内容包装在元素正下方的"主"容器元素中,并将侦听器放在那里而不是在主体或文档上.它甚至可以是一个空的处理函数.Apple仅检查是否已注册.包装所有内容的原因是,无论用户点击的页面在哪里,起泡过程最终都会到达主容器.

如果你这样做,那么ng-blur将在iOS中按预期工作,因为空白空间上的click事件(没有click事件监听器的元素)将在找到父容器的click事件监听器和click事件时通过iOS检查将被正常发送,就像在任何其他浏览器中一样.

警告

此解决方案有效地使iOS Safari在每个DOM元素的层次结构上看到一个单击事件侦听器,诱使它在每个元素上调度click事件,就像普通的浏览器一样.我不知道Apple是否有性能原因他们在iOS中避免这种情况,或者它只是美学/开发者类型偏好(参见示例).您将使用此变通方法更改应用中的默认iOS行为.

例如,iOS用户可能会意外地在您的页面上选择他们并不意味着的文本,并且如果没有单击并按住手势通常不会发生这种情况.