Arrêter les évènements touchstart exécution trop rapide lors du défilement

Je suis à essayer de comprendre comment résoudre le taraudé classe attribuées aux éléments pendant le défilement, mais c'est prenant effet trop rapide dont j'ai besoin pour le retarder un peu quand il est réellement touché au lieu de touché pendant le défilement, c'est mon code de comment cela fonctionne:

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

Lors du défilement, il va céder à la classe de l'élément lorsque je l'ai à peine touché, je veux empêcher que cela se passe sauf s'il est correctement touché (pas cliqué). Bien que j'ai essayé d'expérimenter avec le setTimeout, mais cela ne fonctionne pas, bien que des retards, mais il sera toujours assigner la classe plus tard.

C'est la façon dont je l'ai fait avec le 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;
    }
});

Comment puis-je faire cela de la manière efficace?

Vous devez afficher sur votre iPhone/iPod/iPad ou un émulateur pour tester le violon.

Mise à JOUR:

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

OriginalL'auteur MacMac | 2012-03-23

20

Voici comment je l'ai fait:

Essentiellement, lorsque vous naviguez sur une page, vous allez touchez ou faites défiler. (Bien qu'il y a d'autres choses, comme le pinch et faites glisser les mettre, vous pouvez trouver plus tard)...

Donc sur un robinet de votre "évènements touchstart" sera suivi d'un "touchend'
Sur un défilement de votre "évènements touchstart" sera suivi d'un "touchmove'

À l'aide de Jq 1.7... sur d'autres versions que vous pouvez utiliser .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);
```
En gros, quand un "évènements touchstart' il arrive, je lier des actions de "touchend" et "touchmove'.

'Touchend' fait ce que j'ai envie d'un robinet à faire et se délie lui-même
'Touchmove' ne fait rien sauf unbind 'touchend'

De cette façon, si vous appuyez sur, vous obtenez l'action, si vous faites défiler rien ne se passe, mais le défilement..

RÉPONSE AU COMMENTAIRE: Si je comprends bien votre commentaire correctement, essayez ceci:
```
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);
```
Hmm, je ne sais pas pourquoi, mais le taraudé seule classe est affectée après il est cliqué, quand je prends mon doigt vers le bas sans bouger, il ne montre pas la taraudés de la classe quand il le faut et supprimé lors du défilement. Vérifier mon montage de la façon dont je l'ai fait.
Voilà comment je m'attends à ce qu'il se comporte, rien ne devrait se produire que si vous touchez l'écran, puis retirez votre doigt de l'écran sans défilement...si vous souhaitez affecter une classe lors de votre doigt sur l'écran de céder avant de lier les événements dans nextEvent() n'oubliez pas de le supprimer de votre touchmove lier... en fait, de ce que vos me dire se débarrasser de la touchend lier ensemble et de les assigner la classe dès que nextEvent() est appelée...
Ah, excellent. Votre solution a fonctionné. Merci.
Vous pouvez supprimer le .off('touchend') dans le touchmove bind, je me rends compte maintenant que c'est superflu...
L' .off('touchend') n'est pas superflu, avec des il la touchend est toujours déclenchée.

OriginalL'auteur Likwid_T
3

Malgré ce qui est relativement vieille question avec une réponse déjà sélectionné, je veux partager ma solution.
J'ai réalisé ce par le déclenchement des événements simplement sur clic.
```
$("div, a, span").on("click", function() {
    //Your code here
}
```
Est peut-être pas la meilleure façon de le faire, mais cela a fonctionné pour moi.

OriginalL'auteur Mithc

Vous devez vous connecter pour publier un commentaire.