jQuery implémente le déclencheur d'un bouton d'appui long event_jquery

L'exemple de cet article décrit comment jQuery implémente les événements déclenchant un bouton en appuyant longuement. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le développement rapide des téléphones mobiles nécessite désormais de réaliser de nombreux gestes sur téléphone mobile dans les pages Web mobiles

Il existe de nombreux plug-ins de boutons à pression longue sur Internet, et même jQuery Mobile propose des événements à pression longue

Mais en raison de divers problèmes de compatibilité,

Utilisez uniquement jquery pour implémenter l'action d'appui long, qui peut maintenir une forte compatibilité entre les téléphones mobiles et les ordinateurs

1. Objectifs de base

Créez un bouton, qui est essentiellement un calque avec un fond gris de 100x100px Si vous appuyez dessus et maintenez-le enfoncé pendant 2 secondes, le texte du calque passera de l'intérieur à l'extérieur. Comme indiqué ci-dessous :

2. Processus de production

Le code est le suivant :

Copier le code Le code est le suivant :

Document sans titre

out

<script> /*Définissez une minuterie d'appui long Si ce calque est cliqué pendant plus de 2 secondes, il sera déclenché. Le texte dans mydiv passera de out à in*/ <br>. var délai d'attente ; <br> <br> $("#mydiv").mousedown(function() { <br> Timeout = setTimeout(function() { <br>          $("#mydiv").text("in"); }, 2000); <br> }); <br> <br> $("#mydiv").mouseup(function() { <br> ClearTimeout(délai d'attente); <br> $("#mydiv").text("out"); <br> }); <br> <br> $("#mydiv").mouseout(function() { <br> ClearTimeout(délai d'attente); <br> $("#mydiv").text("out"); <br> }); <br> <br> </script>

Essentiellement, le temps d'appui long ne doit pas être trop long, car cela peut entrer en conflit avec certains gestes d'appui long du système de téléphonie mobile, mais il ne doit pas être trop court, car il n'y a pas de différence entre un temps d'appui long et un clic,

Théoriquement, pour déterminer la fin d'un appui long, il suffit de paramétrer l'action mouseup sur le téléphone portable,

Cependant, seule la configuration de mouseup sur PC entraînera les bugs suivants :




Obscurcissez le texte sur le calque en appuyant longuement, puis faites glisser la souris hors du calque, vous pouvez éviter le jugement du système. Bien sûr, cette action ne peut pas être réalisée sur le téléphone mobile si elle est entièrement écrite. Pour les pages web sur téléphones mobiles, cette étape peut être complètement ignorée. Cependant, pour une meilleure compatibilité, l'action mouseout est ajoutée pour corriger ce bug.

J'espère que cet article sera utile à la programmation jQuery de chacun.