8
votes

Aouchetouchstart etouchendend à JQuery?

Je suis actuellement en train d'utiliser ce qui suit pour chaque élément, je souhaite modifier la classe de touche:

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


3 commentaires

Pourquoi n'avez-vous pas utilisé l'événement Onmousedown Onmousep? Vous n'avez pas besoin de JQ du tout


@ Reign.85 Pour autant que je sache, l'Onmousedown ne déclenche pas lorsqu'un utilisateur touche l'écran, seulement légèrement après.


Nevermind, en fait, TouchStart, obtenez une meilleure performance sur le périphérique mobile. Oublie mon commentaire. Mais vous pouvez toujours le faire sans JQ, vérifier ma nouvelle réponse


4 Réponses :


1
votes

Je pense que vous devez utiliser jQuery Mobile . Il a des événements normalisés, qui sont probablement ce dont vous avez besoin. Voici une liste d'événements spéciaux de l'API d'API de JQuery Mobile: Little Link .

Vous vous souciez de ceux: P>

vmousedown p>

Normalized event for handling touchend or mouseup events


4 commentaires

Donc, il n'y a aucun moyen de le faire simplement avec juste jQuery?


@ Ian34 Je pense que vous pouvez simplement réécrire les événements de la façon dont JQuery Mobile a fait, mais il n'y a aucune raison de "réinventer la roue" :)


Oui, cela semble juste comme un gaspillage d'importer tout le plugin juste pour activer les trucs tackstart


@ Ian34 Vous pouvez personnaliser votre téléchargement pour inclure uniquement les éléments principaux (y compris les événements). Ensuite, le fichier serait à peine 17kb. Pas trop si vous me demandez.



18
votes

J'ai fini simplement en utilisant ceci:

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


0 commentaires

0
votes

Pourquoi n'utilisez-vous pas le : plancher pseudo-classe pour cela? Il me semble que ceci est un changement temporaire des règles CSS du NAV_LI Élément.


3 commentaires

Ce n'est pas une réponse et appartient à la section "Commentaires" de la question.


Le : Hover pseudo-classes est en panne lorsque vous faites glisser sur l'écran (défilement). Pour une raison quelconque, sur les téléphones Android met en évidence une zone aléatoire sur l'écran lors du défilement.


@ LAN34 : Hover n'a pas été conçu pour être utilisé avec des appareils à écran tactile. Lorsque l'entrée (une touche) est détectée, elle déclenche des classes : actifs .



14
votes

sans jQuery: xxx

avec jQuery xxx

effectivement, on () obtenir une meilleure performance que BIND (), vérifier documentation


1 commentaires

Et BIND () a été obsolète un certain temps, donc si vous atterrissez ici, on () est le moyen d'aller.