What triggers the blur event on mobile safari (iPad)

Question

I have a datepicker controller that I want to blur when the user touches somewhere on the screen that is not the datepicker. The problem that Im having with this is that I dont understand what triggers the blur event. For example if the user touches next month the blur event is triggered, so I would like to say, ok if the relatedTarget is a class inside the datepicker (next month) then show the next month and dont hide the datepicker, if the relatedTarget is not on the calendar hide it. The problem is that relatedTarget is always undefined.

So I have two questions:

1. What trigers the blur event on mobile Safari?
2. Why is the event.relatedTarget property always undefined in mobile Safari?

Answer 1

Found out here: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

the following note: "iOS Note: Although drag and drop are not supported, you can produce the same effect using touch events as described in “Using Touch to Drag Elements” in Safari CSS Visual Effects Guide. The unload event may not work as expected for back and forward optimization. Use the pageshow and pagehide events instead."

HTH

Answer 2

Old post, but maybe helpful for futere reference.

Ran in to the same problem the other day. Regarding your first question: What triggers the blur event on mobile Safari? -> It's not triggered in case of a touch event (iPad/iPhone).

I dealt with it by setting an event listener on the enclosing div. Contradictionary to what you (at least I) might expect, the event you'll want to listen to is 'click'. Below the simplified situation:

<div id="enclosing-div">
  <input type="date" "id="date-picker-field">
  <!--Whatever other elements you might have in the enclosing div-->
</div>

Now your js might look like this:

//js

//Get the enclosing div
var enclosingDiv = document.getElementById('enclosing-div');
//Set up an event listener
enclosingDiv.addEventListener('click', blurEnclosedElements);

//function to handle the event listener
function blurEnclosedElements(){
  //Get the element(s) you want to blur and apply your blur logics to it
}