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

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.


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