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 a datepicker parameter. The problem I am facing is that I do not understand what causes the blur event. For example, if a user touches the next month, the event is blurred, so I would say it is normal if the associated Target is a class inside the datepicker (next month) and then shows the next month and does not hide the datepicker if the Target associated with it is not in the calendar hide it. The problem is that relatedTarget is always undefined.

I have two questions:

• What triggers the blur event on mobile Safari?
• Why is the event.relatedTarget property always undefined in mobile Safari?

Answer 1

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

following note: “iOS Note. Although drag and drop is not supported, you can create the same effect using touch events as described in Using Touch to Drag Elements in the Safari CSS Visual Effects Guide. The unload event may not work as expected , to optimize back and forth. Instead, use pages and events to display. "

NTN

Answer 2

Old post, but may be useful for futere link.

We are approaching the same problem the other day. As for your first question: what causes the blur event on mobile Safari? → It does not work in case of a touch event (iPad / iPhone).

I dealt with this by installing an event listener on the attached div. The contradictionary to which you (at least I) might expect the event you want to listen to is 'click'. Below is a 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 }