I have a small problem with touch devices, especially iOS. So I’m building a mobile website and I’m using both “click” and “touchend” events to trigger some functions. The problem is that sometimes the function is called twice.
I’ve tried to check if the event was trigger and cancel the second one but it doesn’t seem to work.
What’s the purpose of using both events? Is touchend meant for mobile and click meant for desktop? If so, you could asign one or the other based on touch capability, such as:
var evt = 'ontouchend' in document ? 'touchend' : 'click';
$(el).on(evt, handle);
In that case, is there a reason to use both touchend and click? If a click action is what you’re after, “click” will work fine for both desktop and mobile. But If you want the same function to fire for both a “click” and a “swipe”, you might want to use some type of swipe detection. That way you could set the touchend function to only execute if enough distance has been measured between touchstart and touchend, and when a mobile device detects a swipe action, it won’t dispatch a click event. So such a setup would ensure that only a “click” or a “swipe” were detected, never both.
The only reason I wanted to use the touch events is because it looks to be faster. Using only click for example on ipad/iphone looks a bit “laggy” and it doesn’t give that smooth transition that I wanted to achieve.
The only reason I wanted to use the touch events is because it looks to be faster. Using only click for example on ipad/iphone looks a bit “laggy” and it doesn’t give that smooth transition that I wanted to achieve.
yeah the click event has a delay. Here’s a good article about it:
Also, avoid using this ‘ontouchend’ in document ? ‘touchend’ : ‘click’, as if the device has both touch support and some other control (e.g. mouse), mouse won’t work.