Menu
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):
$("a").focus(function(){ console.log("focus fired"); }); $("a").blur(function(){ console.log("blur fired"); }); 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> 
977
If you want to prevent the blur event from being fired, you have to do so when you are inside the mousedown event, you can do so by invoking the method preventDefault() on the event. Click the checkbox, focus input & then click the button, the textfield never loses focus now.
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.
53
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 }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
