So you set the onclick attribute. Now it works great on "traditional" platforms (which have a mouse device with buttons that can be used to click on objects). The touch device (the name key) does not have this, instead it is controlled by touching the screen. Well, you knew that, so I understand that the touch event is extremely multi-touch.
Touching the screen for a second means something completely different than touching the screen for a second. You can also touch the screen with 1, 2, 3 or 4 fingers. This needs to be handled differently each time.
To make things even more complex, you can drag or scroll around the screen, which also needs to be handled differently.
As luck would have it, I recently wrote some code to map specific touch events to a click handler, use closures, bind listeners, and setup timeouts around the place. Thus, it can help you on your way:
if ('ontouchstart' in window) {//we have a touch device document.body.addEventListener('touchstart',function(e) {//handle all touch events on the body e = e || window.event; //not sure about all mobile browsers (win mobile) //so I'm playing it safe var target = e.target || e.srcElement; if (target.tagName.toLowerCase() !== 'a') {//didn't touch on a link return e;//stop } //touch must end after .3 seconds, otherwise user is zooming or something var timer = setTimeout(function() { target.removeEventListener('touchend',endHandler,false);//unbind after .3 seconds clearTimeout(timer); },300); var endHandler = function(e) { e = e || window.event; var endTarget = e.target || e.srcElement;//get element on which the touch ended clearTimeout(timer);//stop timer target.removeEventListener('touchend',endHandler,false);//remove listener if (endTarget !== target) {//user "swiped" return e; } //touch ended within .3 seconds, and ended on the same element, interpret this as click return clickHandlerFunction.apply(target,[e]);//invoke click handler with the target as context }; target.addEventListener('touchend',endHandler,false);//bind touchend listener },false); }
What this means is basically to log all touchstart events. The first thing that is checked is that the user touched the element of interest that I want to handle using my custom event handler. If not, the event returns, nothing changes.
If the item is of interest, I create a listener for the touchend event for this purpose. I also set a timeout that will remove this listener after 0.3 seconds (to prevent a leak). If the touchend event fires, check if the user was fired on the source element, if not, interpret it as swipe and stop.
If the goals match, call the click handler in the target context and pass the event object! therefore, you can use the stopPropagation() and / or preventDefault() methods. touchhandler also starts by clearing the timer and deleting itself too (again: to prevent memory leak).
As always, this is really a very simple snippet that can work with much more work.
Touch events contain much more information (you can check how many fingers touch the screen, for example). I also omitted a bit of my source code because it would make it very complicated and messy (and I don’t have it with me, and I can’t remember how I dealt with certain situations). However, I can tell you that I try to check the coordinates of e.clientX and e.clientY , and if the touchend event was within 50 pixels of the touchstart target, I still match it with the click handler: to provide some soft focus for people, which are cold and quivering;) so even Inuit can view the page.
Anyway, see what works for you. Some useful links:
Touch table
some story
some touch libraries