Solving The Double Tap Issue on iOS – iPhone, iPad Devices
The Click Event in iOS devices behave strangely. On Apple touch devices, the links can be accessed only after two taps on the link because the first tap trigger the hover event, and second tab trigger the click event. Most of user see that as a problem, but it’s actually the way it was intended. When there is an element that is displayed or hidden on hover, the first tap acts as hover. It is useful as well when you don’t miss out important content to your user.
But in some cases user may view it as an issue, because link should redirect when user click on any menu item.
So in that case you can use below code snippets.
Just make sure that you have added the meta tag for responsive website.
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"/> |
Now add the touchend event that trigger on user tap end
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $("a").on("click touchend", function(e) { var el = $(this); var link = el.attr("href"); window.location = link; }); }); |
The touchend event will redirect the browser to the target of the link as soon as the tap finishes.
That’s it! I hope you found this article useful. If you have any question regarding this, Please leave a comment.
[paypal-donation]
I’m becoming highly frustrated because no one understands what I’m talking about. I’m playing a game where you have to double tap and somehow I’m not doing it right. Like the pattern I’m using, the time between each tap is off. I’ve been doing it forever and now I can’t do it because I’m thinking about it. Thanks