发表新帖
发表新帖

Why is blur event not fired in iOS Safari Mobile (iPhone / iPad)?

后端 未结
关注
5 1104
感动是毒
感动是毒 2020-12-15 17:46

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

相关标签:
5条回答
  • 天涯浪人
    2020-12-15 18:19

    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.

    There is a complete guide to using Javascript events in WebKit on iOS.

    0 讨论(0)
  • 深忆病人
    2020-12-15 18:21

    If you're working with touch devices you can use the touchleave or touchend event to handle when the user clicks outside the area.

    $("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
 })
    0 讨论(0)
  • 既然无缘
    2020-12-15 18:24

    I have check all the doc in the @NicholasShanks answer, but a little frustrated testing all the events.

    Android and iOS:

    • Tested on Android Samsung S9
    • Tested on 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.

    // 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
})
    0 讨论(0)
  • 渐次进展
    2020-12-15 18:37

    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).

    There are a couple of threads regarding this (e.g. .click event not firing in Chrome on iOS). You can fix it by adding cursor: pointer to the <body> or some other element that the click will be performed on.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-15 18:45

    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.

    $('*').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.

    0 讨论(0)
 看不清?
提交回复
热议问题