Остановить слишком быстрое выполнение тачстарта при прокрутке

Я пытаюсь понять, как решить, что класс tapped назначается элементам при прокрутке, но он действует слишком быстро, и мне нужно немного отложить его, когда он действительно коснулся вместо этого касания во время прокрутки, вот мой код того, как это работает:

$('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;
    }
});

При прокрутке он назначит класс элементу, когда я едва коснулся его, я хочу, чтобы этого не происходило, если только он не был правильно затронут (не нажат ). Хотя я пытался поэкспериментировать с setTimeout, но это не работает, так как задерживает, но позже все равно назначит класс.

Вот как я это сделал с 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;
    }
});

Как я могу сделать это эффективным способом?

• Демонстрация #1 (с setTimeout).
• Демонстрация #2 (без setTimeout)

Вам необходимо просмотреть ее на вашем iPhone/iPod/iPad или эмуляторе, чтобы протестировать скрипку.

ОБНОВЛЕНИЕ:

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