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).removeClass('select');"

I was wondering if there is something like this?:

$("#element").touchstart(function(){
    $(this).addClass('select');
},
function(){
   $(this).removeClass('select');
});

That I would be able to list all the elements that I want to have this property. I have tried so many things and cant get it to work.

Answer 1

I ended up just using this:

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

Answer 2

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