为什么在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？答案

【问题标题】：Why is blur event not fired in iOS Safari Mobile (iPhone / iPad)?为什么在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？
【发布时间】：2012-11-21 12:06:12
【问题描述】：

我有两个事件处理程序绑定到一个锚标记：一个用于焦点和模糊。

处理程序在桌面上触发，但在 iphone 和 ipad 中，只有焦点被正确触发。如果我在锚标记外部单击，则不会触发模糊（仅当我单击页面中的其他一些表单元素时才会触发模糊）：

    $("a").focus(function(){
        console.log("focus fired");
    });

    $("a").blur(function(){
        console.log("blur fired");
    });

HTML：

<html>
<form>
    <a href="#">test link</a>
    <div>
    <input type="text" title="" size="38" value="" id="lname1" name="" class="text">
    </div>
    <div style="padding:100px">
        <p>test content</p>
    </div>
</form>
</html>

【问题讨论】：

标签： javascript iphone html ios ipad

【解决方案1】：

如果锚点附加了任何事件，在 iOS 中第一次点击它会导致锚点进入悬停状态并获得焦点。轻按一下即可删除悬停状态，但链接仍保持焦点。这是设计使然。要在 iOS 上正确控制应用程序，您需要实现基于触摸的事件并对这些事件而不是桌面事件做出反应。

有a complete guide to using Javascript events in WebKit on iOS。

【讨论】：

我在developer.apple.com/library/safari/#documentation/… 中发现了一件更有趣的事情，即只有当我点击可点击元素时，才只有锚标签失去焦点。
我已经阅读了发布的指南，但仍然没有看到您如何检测输入元素何时失去焦点？你能发布一个代码示例吗？
@ChrisFox 抱歉，我没有任何代码示例。您必须点击另一个表单元素来转移焦点（并在前一个元素上获得模糊事件）。

【解决方案2】：

如果您使用的是触摸设备，您可以使用 touchleave 或 touchend 事件来处理用户在区域外点击的情况。

$("a").on('touchleave touchcancel', function () {
      // do something
});

为此，您需要更新焦点函数以侦听 click 事件，如下所示

$("a").on("click", function (e) {
      if(e.handled !== true) {
            e.handled = true
      } else {
            return false
      }
      // do something
 })

【讨论】：

【解决方案3】：

这是一个 hack，但您可以通过在每个 DOM 元素上注册一个点击处理程序来触发 .blur。这会从先前聚焦的元素中移除焦点。

$('*').click();
$('html').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');

当元素被点击时，第二行移除高亮。

我知道这是次优的，但它可能会让你继续前进。

【讨论】：

不要像这样针对页面上的每个元素。这为每个人提供了一个听众。单身的。多姆。元素。性能太差了。

【解决方案4】：

我已经检查了@NicholasShanks 答案中的所有文档，但测试所有事件有点沮丧。

Android 和 iOS：

在 Android 三星 S9
在 iOS iPad 5ºgen

终于有办法了：似乎 iPad 将 mouseout 听为模糊，而 android 似乎完美地听了 blur 事件，我只是在这种情况下添加了一个三元以附加正确的事件（以前我的目标是移动或平板设备而不是计算机。

// element >> element you want to trigger
// os >> function that return operative system 'ios' or 'android' in my case

element.addEventListener(os === 'ios' ? 'mouseout' : 'blur', () => {
  // Do something
})

【讨论】：

【解决方案5】：

blur 事件不会触发，因为当您在锚标记之外点击不可点击元素时，iOS 会忽略该点击（并且click 事件不会触发）。

关于这个有几个线程（例如.click event not firing in Chrome on iOS）。您可以通过将cursor: pointer 添加到<body> 或将执行点击的其他元素来修复它。

【讨论】：