为啥在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？
Posted
技术标签:
【中文标题】为啥在 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>
【问题讨论】：
【参考方案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> 或将执行点击的其他元素来修复它。
【讨论】：
以上是关于为啥在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Safari Mobile 中无法播放网络音频 api 振荡器？
iOS 7 Safari 干扰 jQuery Mobile 页脚
Dojo Mobile ComboBox 下拉菜单在 iOS8/Safari 中错位