Javascript 为什么在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13492881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is blur event not fired in iOS Safari Mobile (iPhone / iPad)?
提问by Mohamed Hussain
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. Blur is not fired if I click outside the anchor tag (blur fires only when I click some other form elements in the page):
处理程序在桌面上触发，但在 iphone 和 ipad 中只有焦点被正确触发。如果我在锚标记外单击，则不会触发模糊（仅当我单击页面中的某些其他表单元素时才会触发模糊）：
$("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>
采纳答案by Nicholas Shanks
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. 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 中第一次点击它会导致锚点进入悬停状态并聚焦。轻按可移除悬停状态，但链接仍保持聚焦。这是设计使然。要在 iOS 上正确控制应用程序，您需要实现基于触摸的事件并对这些事件而不是桌面事件做出反应。
There is a complete guide to using Javascript events in WebKit on iOS.
回答by Dan Torrey
It's a hack, but you can get .blur to fire by registering a click handler on every DOM element. This removes focus from the previously focused element.
这是一个 hack，但是您可以通过在每个 DOM 元素上注册一个点击处理程序来触发 .blur。这会从先前聚焦的元素中移除焦点。
$( '*' ).click( function ( ) { } );
$( '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.
我知道这是次优的，但它可能会让你前进。
回答by sains23
If you're working with touch devices you can use the touchleaveor touchendevent 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 clickevent as follows
为此，您需要更新您的焦点功能以侦听点击事件，如下所示
$("a").on("click", function (e) {
if(e.handled !== true) {
e.handled = true
} else {
return false
}
// do something
})
回答by Héctor León
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 AndroidSamsung S9
- Tested on iOSiPad 5ogen
- 在Android三星 S9上测试
- 在iOSiPad 5ogen上测试
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
})
