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

Question

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

处理程序在桌面上触发，但在 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>

Answer 1

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

有一个在 iOS 上的 WebKit 中使用 Javascript 事件的完整指南。

Answer 2

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

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

第二行在单击元素时删除突出显示。

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

Answer 3

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

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

为此，您需要更新您的焦点功能以侦听点击事件，如下所示

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

Answer 4

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

安卓和iOS：

在Android三星 S9 上测试
在iOS iPad 5ºgen 上测试

最后我得到了一个解决方案：似乎 iPad 将 mouseout 监听为模糊，而 android 似乎完美地监听了模糊事件，我只是在这种情况下添加了一个三元组来附加正确的事件（以前我的目标是移动或平板设备）一台电脑。

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

Answer 5

在最外面的div

<div onclick='click()'>

然后在JavaScript中

function click(){}

Answer 6

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

有几个与此相关的线程（例如.click 事件未在 iOS 上的 Chrome 中触发）。 您可以通过添加cursor: pointer <body>或将执行单击的其他元素的cursor: pointer来修复它。

Answer 7

我发现的最简单的解决方案是在页面初始化时让 document.body 成为“可点击的”：

document.body.onclick = function() {};

然后在任何地方单击都会模糊活动元素，就像在桌面浏览器上一样。 在 iOS 15.3.1 上测试。

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

问题描述

6 个解决方案

解决方案1
10 已采纳 2012-11-21 12:13:41

解决方案2
4 2016-07-29 19:31:48

解决方案3
3 2017-01-19 11:39:05

解决方案4
1 2020-03-27 13:07:34

解决方案5
0 2017-02-17 08:27:37

解决方案6
0 2020-12-03 15:15:18

解决方案7
0 2022-03-29 23:55:31

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

问题描述

6 个解决方案

解决方案1 10 已采纳 2012-11-21 12:13:41

解决方案2 4 2016-07-29 19:31:48

解决方案3 3 2017-01-19 11:39:05

解决方案4 1 2020-03-27 13:07:34

解决方案5 0 2017-02-17 08:27:37

解决方案6 0 2020-12-03 15:15:18

解决方案7 0 2022-03-29 23:55:31

解决方案1
10 已采纳 2012-11-21 12:13:41

解决方案2
4 2016-07-29 19:31:48

解决方案3
3 2017-01-19 11:39:05

解决方案4
1 2020-03-27 13:07:34

解决方案5
0 2017-02-17 08:27:37

解决方案6
0 2020-12-03 15:15:18

解决方案7
0 2022-03-29 23:55:31