Click & Touchend Called Twice


#1

Hi guys,

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.

Here’s what I have so far http://jsfiddle.net/Bdk8t/ .

Fast link to test on devices http://jsfiddle.net/Bdk8t/embedded/result/

Thanks!


#2

You could stop the button from getting touched/clicked more than once within a certain time period, eg: http://jsfiddle.net/Bdk8t/2/


#3

Thanks Dave, I think this will work for what I want to achieve. If anyone knows a better solution without time limit, would be appreciated. Thanks


#4

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);

#5

Yes, is meant to be used on both touch and not touch devices. I think this approach wont work if the device is cable of click and touch.


#6

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.


#7

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.


#8

Ended up using only the click event. Thanks guys!


#9
vtimbuc said

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:







haven’t used vmouse but it looks pretty cool.


#10

If you’re using touchend just to speed up click event, you might consider looking into this library - https://github.com/ftlabs/fastclick

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.