Stop the touchstart performing too quick when scrolling-Collection of common programming errors

I’m trying to figure out how to solve the tapped class being assigned to the elements when scrolling, but it’s taking effect too quick which I need to delay it a bit when it’s actually touched instead of touched while scrolling, this is my code of how it works:

$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    var self = $(this);

    self.addClass(self.data('tappable-role'));
}).bind('touchend', function()
{
    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

When scrolling, it will assign the class to the element when I’ve barely touched it, I want to prevent this from happening unless it’s properly touched (not clicked). Although I tried experimenting with the setTimeout, but that doesn’t work well as it delays but it will still assign the class later on.

This is how I did it with the setTimeout:

var currentTapped;
$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    clearTimeout(currentTapped);

    var self = $(this);

    var currentTapped = setTimeout(function()
    {
        self.addClass(self.data('tappable-role'));
    }, 60);
}).bind('touchend', function()
{
    clearTimeout(currentTapped);

    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    clearTimeout(currentTapped);

    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

How can I do this the effective way?

• Demo #1 (with setTimeout).
• Demo #2 (with no setTimeout)

You need to view it on your iPhone/iPod/iPad or an emulator to test the fiddle.

UPDATE:

function nextEvent() 
{
    $(this).on('touchend', function(e)
    {
        var self = $(this);

        self.addClass(self.data('tappable-role')).off('touchend');
    })
    .on('touchmove', function(e)
    {
        var self = $(this);

        self.removeClass(self.data('tappable-role')).off('touchend');
    })
    .click(function()
    {
        var self = $(this),
            goTo = self.data('goto');

        if(typeof goTo !== 'undefined')
        {
            window.location = goTo;
        }
    });
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);