Angular - iPhone / iPad上的ng-blur问题
[英]Angular - issue with ng-blur on iPhone/iPad
问题描述
我使用AngularJS 1.4.7
我有可编辑的输入。 如果我们专注于输入并在此输入字段之外单击后，脚本将在ng-blur执行"save()"功能。 一切正常，但在iPhone 5/6和iPad上无法正常工作（不能在ng-blur执行任何操作）。 我不知道为什么，但我推断这个问题是focus/touch动作。 有人知道问题出在哪里？
2 个解决方案
解决方案1
6 2016-03-12 19:09:03
修复ng-blur无法处理空白空间和大多数iOS元素
目标
在我的应用程序中，我们希望在单击菜单或搜索框时隐藏打开的菜单或搜索结果。
问题
单击远离当前元素时，iOS Safari无法正常模糊。
注意
您不需要特殊指令。 问题不在于ng-blur，它工作正常。 问题在于，由于Apple在iOS上的不寻常设计，无论是否使用ng-blur或原生DOM模糊事件，都不会发生模糊事件。
发行原因
Apple设计了移动Safari来执行事件冒泡，这与桌面浏览器不同。 根据官方Apple文档，如果单击的元素没有附加单击侦听器，则不会触发任何单击事件。 如果没有单击事件，焦点不会更改并且不会发生模糊事件，因此即使用户确实单击了页面上的其他位置，当前元素也不会失去焦点。
只有当用户单击带有单击事件侦听器的元素时，才会出现模糊。 某些元素（如超链接和输入）具有用于单击的“内置”事件侦听器，因此将始终注册单击，从而导致模糊工作。
通常在桌面浏览器中，无论元素的DOM层次结构中是否存在已注册的侦听器，都会盲目触发click事件。 这就是为什么ng-blur在桌面浏览器中按预期工作，即使在“空白空间”也是如此。
Apple表示，对于iOS Safari，只有在找到注册的元素才能收听该事件时，他们才会调度该事件。
Apple的文档听起来像是在寻找已注册的事件监听器并在目标元素上处理，但事实并非如此。 我在下面的文章中找到了答案，更重要的是，它给出了一个评论。
首先，观察如果目标元素没有单击事件侦听器和处理程序，则在iOS上安装侦听器不会导致在事件上调度click事件。 它适用于大多数浏览器，但不适用于iOS。
在调度click事件之前，Apple似乎正在检查DOM层次结构到 <body>标记，但是没有检查<body>标记或更高版本。 因此，您需要一个附加到<body>下面某个元素的click事件侦听器。
解决方案/解决方法
那么解决方案非常简单。 您需要做的就是将所有页面内容包装在<body>元素正下方的“master”容器元素中，并将侦听器放在那里而不是在主体或文档上。 它甚至可以是一个空的处理函数。 Apple仅检查是否已注册。 包装所有内容的原因是，无论用户点击的页面在哪里，起泡过程最终都会到达主容器。
如果你这样做，那么ng-blur将在iOS中按预期工作，因为空白空间上的click事件（没有click事件监听器的元素）将在找到父容器的click事件监听器和click事件时通过iOS检查将被正常发送，就像在任何其他浏览器中一样。
警告
此解决方案有效地使iOS Safari在每个DOM元素的层次结构上看到一个单击事件侦听器，诱使它在每个元素上调度click事件，就像普通的浏览器一样。 我不知道Apple是否有性能原因他们在iOS中避免这种情况，或者它只是美学/开发者类型偏好（参见示例）。 您将使用此变通方法更改应用中的默认iOS行为。
例如，iOS用户可能会意外地在您的页面上选择他们并不意味着的文本，并且如果没有单击并按住手势通常不会发生这种情况。
解决方案2
0 2016-01-05 10:39:57
我不知道为什么会出现这个问题。 但做一件事。 创建一个小指令'假模糊'。 然后在该指令中调用您的方法
App.directive('fakeBlur', function(){ return { restrict: 'A', link: function(scope, element, attrs) { element.blur(function(){ // call you function ex: scope.save(); }) } } });
<input type="text" fake-blur/>
角度：检查值ng-blur
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.