23

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

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

5 回答 5

9

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

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

于 2012-11-21T12:13:41.640 回答
3

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

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

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

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

于 2016-07-29T19:31:48.000 回答
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
 })
于 2017-01-19T11:39:05.693 回答
2

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

安卓和iOS：

  • 在安卓三星 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
})
于 2020-03-27T13:07:34.983 回答
0

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

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

于 2020-12-03T15:15:18.047 回答