ontouchstart and ontouchend in jquery?

Question

I am currently using the following for every element I want to change the class of on touch:

ontouchstart=\"$(this).addClass(\'select\');\" ontouchend=\"$(this).         


        

Answer 1

Without JQUERY :

element.addEventListener('touchstart',function(e) {
 e.currentTarget.className = "select";
});

With JQUERY

$('#nav ul li a').on('touchstart', function(){
    $(this).addClass('select');
});

Actually, on() get better performance than bind(), check documentation

Answer 2

Why don't you use the :hover pseudo-class for this? It seems to me that this is a temporary change of the CSS rules of the nav_li element.

Answer 3

I think you need to use jQuery Mobile. It has some normalized events, which are quite possibly what you need. Here's a list of special events from jQuery Mobile's API reference: little link.

You care about those:

vmousedown

Normalized event for handling touchstart or mousedown events

vmousemove

Normalized event for handling touchmove or mousemove events

vmouseup

Normalized event for handling touchend or mouseup events

Answer 4

I ended up just using this:

$('#nav li').bind('touchstart', function(){
    $(this).addClass('select');
}).bind('touchend', function(){
    $(this).removeClass('select');
});