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上正确控制应用程序，您需要实现基于触摸的事件并对这些事件做出反应而不是桌面事件。

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

Answer 2

这是一个黑客，但你可以通过在每个DOM元素上注册一个点击处理程序来启动.blur。这会从以前关注的元素中移除焦点。

$( '*' ).click( function ( ) { } );
$( '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答案中的所有文档，但是对所有事件进行测试有些沮丧。

Android和iOS：

在 Android 三星S9
在 iOS iPad5º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 event not firing in Chrome on iOS）。您可以通过将cursor: pointer添加到<body>或其他将对其执行点击的元素来解决该问题。

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

6 个答案: