Detener el inicio de la función demasiado rápido cuando se desplaza

Question

Estoy tratando de encontrar la forma de resolver la clase golpeada asignada a los elementos al desplazarme, pero está surtiendo efecto demasiado rápido y necesito demorarlo un poco cuando se toca en lugar de tocar mientras se desplaza, esto es mi código de cómo funciona:

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

al desplazarse, asignará la clase al elemento cuando apenas he tocado, quiero evitar que esto suceda a menos que sea tocado correctamente (sin hacer clic). Aunque traté de experimentar con setTimeout, pero eso no funciona bien, ya que retrasa, pero aún asignará la clase más adelante.

Ésta es la forma en que lo hice con el 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; 
    } 
}); 

¿Cómo puedo hacer esto de la manera efectiva?

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

lo necesario para ver en tu iPhone/iPod/iPad o un emulador para probar el violín.

ACTUALIZACIÓN:

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

Answer 1

Así es como lo hice:

En esencia, cuando se desplaza una página que va a puntear o de desplazamiento. (Bueno, hay otras cosas como pellizcar y colocar diapositivas, puedes averiguarlas más adelante) ...

Por lo tanto, tocando un botón, a su 'touchstart' le seguirá un 'touchend' En un desplazamiento, su 'touchstart' aparecerá ser seguido por un 'touchmove'

Usando Jq 1,7 ... en otras versiones puede utilizar .bind()

function nextEvent() { 
    //behaviour for end 
    $(this).on('touchend', function(e){ 
     /* DO STUFF */ 
     $(this).off('touchend'); 
    }); 
    //behaviour for move 
    $(this).on('touchmove', function(e){ 
     $(this).off('touchend'); 
    });  
} 

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

Básicamente, cuando un 'touchstart' sucede, ato acciones a 'touchend' y 'touchmove'.

'touchEnd' hace lo que me gustaría que un grifo que hacer y luego desenlaza en sí 'TouchMove' básicamente no hace nada excepto unbind 'touchend'

De esta manera si se toca a obtener la acción, si se desplaza no pasa nada pero el desplazamiento ..

respuesta al comentario: Si entiendo tu comentario correctamente, intente esto:

function nextEvent() { 
    var self = $(this); 
    self.addClass(self.data('tappable-role')) 
    //behaviour for move 
    $(this).on('touchmove', function(e){ 
     self.removeClass(self.data('tappable-role')); 
    });  
} 

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

Answer 2

a pesar de esto es una cuestión relativamente antigua con una La mejor respuesta ya seleccionada, quiero compartir mi solución. Lo logré activando los eventos con solo hacer clic.

$("div, a, span").on("click", function() { 
    // Your code here 
} 

Tal vez no es la mejor manera de hacerlo, pero esto funcionó para mí.