为什么在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？
[英]Why is blur event not fired in iOS Safari Mobile (iPhone / iPad)?
问题描述
I've two event handlers bound to an anchor tag: one for focus and blur.
我有两个绑定到锚标记的事件处理程序：一个用于焦点和模糊。
The handlers fire on desktop, but in iphone and ipad only focus is fired correctly.处理程序在桌面上触发，但在 iphone 和 ipad 中只有焦点被正确触发。 Blur is not fired if I click outside the anchor tag (blur fires only when I click some other form elements in the page):如果我在锚标记外单击，则不会触发模糊（仅当我单击页面中的其他一些表单元素时才会触发模糊）：
$("a").focus(function(){
console.log("focus fired");
});
$("a").blur(function(){
console.log("blur fired");
});
HTML: 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>
6 个解决方案
解决方案1
10 已采纳 2012-11-21 12:13:41
If an anchor has any events attached, the first tap on it in iOS causes the anchor to be put into the hover state, and focused.如果锚点附加了任何事件，则在 iOS 中第一次点击它会导致锚点进入悬停状态并聚焦。 A tap away removes the hover state, but the link remains focused.轻按可移除悬停状态，但链接仍保持聚焦。 This is by design.这是设计使然。 To properly control an application on iOS, you need to implement touch-based events and react to those instead of desktop ones.要正确控制 iOS 上的应用程序，您需要实现基于触摸的事件并对这些事件而不是桌面事件做出反应。
There is a complete guide to using Javascript events in WebKit on iOS .有一个在 iOS 上的 WebKit 中使用 Javascript 事件的完整指南。
解决方案2
4 2016-07-29 19:31:48
It's a hack, but you can get .blur to fire by registering a click handler on every DOM element.这是一个 hack，但是您可以通过在每个 DOM 元素上注册一个点击处理程序来触发 .blur。 This removes focus from the previously focused element.这会从先前聚焦的元素中移除焦点。
$('*').click();
$('html').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
The second line removes the highlight when elements are clicked.第二行在单击元素时删除突出显示。
I know this is sub-optimal, but it may get you going.我知道这是次优的，但它可能会让你前进。
解决方案3
3 2017-01-19 11:39:05
If you're working with touch devices you can use the touchleave or touchend event to handle when the user clicks outside the area.如果您使用的是触摸设备，您可以使用touchleave或touchend事件来处理用户在区域外单击的情况。
$("a").on('touchleave touchcancel', function () {
// do something
});
For this to work you need to update your focus function to listen for an on click event as follows为此，您需要更新您的焦点功能以侦听点击事件，如下所示
$("a").on("click", function (e) {
if(e.handled !== true) {
e.handled = true
} else {
return false
}
// do something
})
解决方案4
1 2020-03-27 13:07:34
I have check all the doc in the @NicholasShanks answer, but a little frustrated testing all the events.我已经检查了@NicholasShanks 答案中的所有文档，但是测试所有事件时有点沮丧。
Android and iOS:安卓和iOS：
- Tested on Android Samsung S9在Android三星 S9 上测试
- Tested on iOS iPad 5ºgen在iOS iPad 5ºgen 上测试
Finally i have got a solution: Seems iPad listen to mouseout as blur, and seems android listen perfectly to the blur event, i just add a ternary on this case to attach the right event (previously i have aimed to a mobile or tablet device instead of a computer.最后我得到了一个解决方案：似乎 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
})
解决方案5
0 2017-02-17 08:27:37
in the out-most div 在最外面的div
<div onclick='click()'>
then in javascript 然后在JavaScript中
function click(){}
解决方案6
0 2020-12-03 15:15:18
The blur event does not fire because when you click outside the anchor tag on a non-clickable element, iOS ignores the click (and the click event does not fire). blur事件不会触发，因为当您在不可点击元素上的锚标记外单击时，iOS 会忽略该单击（并且不会触发click事件）。
There are a couple of threads regarding this (eg .click event not firing in Chrome on iOS ).有几个与此相关的线程（例如.click 事件未在 iOS 上的 Chrome 中触发）。 You can fix it by adding cursor: pointer to the <body> or some other element that the click will be performed on.您可以通过添加cursor: pointer <body>或将执行单击的其他元素的cursor: pointer来修复它。
解决方案7
0 2022-03-29 23:55:31
The simplest solution I've found is to just make document.body "clickable" at page initialization time:我发现的最简单的解决方案是在页面初始化时让 document.body 成为“可点击的”：
document.body.onclick = function() {};
Then a click anywhere will blur the active element, just like on a desktop browser.然后在任何地方单击都会模糊活动元素，就像在桌面浏览器上一样。 Tested on iOS 15.3.1.在 iOS 15.3.1 上测试。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.