角度-iPhone/iPad上的ng模糊问题

Angular - issue with ng-blur on iPhone/iPad

本文关键字：ng 模糊 问题 上的 iPad -iPhone 角度      更新时间：2023-09-26

我使用AngularJS 1.4.7

我有可编辑的输入。如果我们专注于输入，并且在该输入字段之外单击后，脚本将在ng-blur中执行函数"save()"。一切正常，但在iPhone 5/6和iPad上不工作（在ng-blur中不执行任何内容）。我不知道为什么，但我推断问题出在focus/touch的作用中。有人知道问题出在哪里？

在iOS中修复了ng blur不适用于空白空间和大多数元素的问题

目标

在我的应用程序中，我们希望在远离时隐藏打开的菜单或搜索结果菜单或搜索框。

问题

iOS Safari在单击离开当前元素时不会正确模糊。

注意

你不需要特别的指示。问题不在于ng模糊，它运行良好。问题是，无论你使用的是ng blur还是原生DOM blur事件，由于苹果在iOS上的不同寻常的设计，模糊事件永远不会发生。

问题原因

苹果公司设计了移动Safari，以不同于桌面浏览器的方式执行事件冒泡。根据苹果公司的官方文档，如果被点击的元素没有附加点击侦听器，那么就不会触发点击事件。如果没有单击事件，焦点不会改变，也不会发生模糊事件，因此即使用户确实单击了页面上的其他地方，当前元素也不会失去焦点。

只有当用户使用click事件监听器单击某个元素时，才会发生模糊。一些元素，如超链接和输入，具有用于单击的"内置"事件侦听器，因此将始终注册单击，从而导致模糊工作。

通常在桌面浏览器中，无论元素的DOM层次结构中是否存在注册的侦听器，都会盲目地触发单击事件。这就是为什么ng blur在桌面浏览器中可以像预期的那样工作，即使是在"空白空间"上。

苹果公司表示，对于iOS Safari，他们只有在找到注册监听元素的情况下才会发送事件。

苹果文档-转至图6-4

苹果的文档听起来像是在寻找一个注册的事件侦听器，并在目标元素上进行处理，但事实并非如此。我在下面的文章中找到了答案，更重要的是，其中一条评论

Quirksmode关于iOS事件委托的文章

首先，请注意，如果目标元素没有单击事件侦听器和处理程序，则在文档或正文上放置侦听器不会导致在iOS Safari上调度单击事件。它适用于大多数浏览器，但不适用于iOS。

在调度单击事件之前，Apple似乎正在检查DOM层次结构直到<body>标记，但没有检查<body>标记或更高标记。因此，您需要一个点击事件侦听器，该侦听器连接到<body>下方的某个元素。

解决方案/解决方案

因此，解决方案非常简单。您所需要做的就是将所有页面内容包装在<body>元素下方的"master"容器元素中，并将侦听器放在那里，而不是放在正文或文档上。它甚至可以是一个空的处理程序函数。苹果只是在检查一个是否注册。包装所有内容的原因是，无论用户单击页面的哪个位置，弹出过程最终都会到达主容器。

如果你这样做，那么ng-flur将在iOS中正常工作，因为当它找到父容器的点击事件监听器时，空空间上的点击事件（一个没有点击事件监听器的元素）将通过iOS检查，点击事件将像在任何其他浏览器中一样正常调度。

注意

该解决方案有效地使iOS Safari在每个DOM元素的层次结构上都看到一个点击事件侦听器，使其像普通浏览器一样在每个元素上调度点击事件。我不知道苹果是否有性能原因，他们在iOS中避免这样做，或者这只是一种美学/开发者类型的偏好（见示例）。您将使用此解决方法更改应用程序中的默认iOS行为。

例如，iOS用户可能会意外地在你的页面上选择他们并非有意的文本，如果没有点击并保持手势，通常不会发生这种情况。

我不知道为什么会出现这个问题。但要做一件事。创建一个小指令"伪模糊"。然后调用该指令中的方法

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/>

相关文章：