为什么iOS Safari Mobile（iPhone / iPad）中的模糊事件没有触发？

Question

为什么iOS Safari Mobile（iPhone / iPad）中的模糊事件没有触发？

24

我已经为一个锚点绑定了两个事件处理程序：一个用于焦点和模糊。

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

- Mohamed Hussain

6个回答

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

- sains23

2

这是一种折中方法，但您可以在每个DOM元素上注册一个click事件处理程序来触发.blur。这将从先前聚焦的元素中移除焦点。

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

第二行代码可以在元素被点击时移除高亮显示。

我知道这不是最佳方案，但它可能会帮助您入门。

- Dan Torrey

2

不要像这样针对页面上的每个元素。这会为每个单独的 DOM 元素启动一个监听器。这对性能来说非常糟糕。 - dudewad

2

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

Android和iOS：

- 在Samsung S9上测试过Android - 在第5代iPad上测试过iOS 最终我找到了一个解决方案：似乎iPad把mouseout当作blur来监听，而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
})

- Héctor León

1

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

有一些关于此问题的讨论帖子（例如 .click event not firing in Chrome on iOS）。您可以通过为 <body> 或其他将执行单击操作的元素添加 cursor: pointer 来修复它。

- Code

0

我找到的最简单的解决方案是在页面初始化时使document.body“可点击”：

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

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

- Ian Lovejoy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicholas Shanks · Accepted Answer

如果一个锚点附带了任何事件，在iOS上首次点击它会导致该锚点进入悬停状态并获得焦点。点击其他地方可以取消悬停状态，但链接仍然保持聚焦状态。这是有意设计的。为了正确控制iOS上的应用程序，您需要实现基于触摸的事件并对其做出反应，而不是使用桌面事件。

在iOS上，有使用JavaScript事件的完整指南可供参考。