Introduction aux événements tactiles et aux événements de souris virtuelle dans la page mobile jQuery development

Introduction aux événements tactiles et aux événements de souris virtuelle dans la page mobile jQuery development_jquery

WBOY

Libérer： 2016-05-16 15:27:48

original

1290 Les gens l'ont consulté

Événement tactile (toucher)
Certains événements tactiles sont personnalisables dans jQuery Mobile. Cependant, ces événements ne sont disponibles que lorsqu'un utilisateur interagissant avec un appareil tactile visite votre site jQuery Mobile. Lorsque ces événements sont disponibles, vous pouvez déclencher n'importe quel JavaScript personnalisé en réponse à cinq événements différents : appuyer, appuyer sur maintenir, glisser, glisser vers la gauche et glisser vers la droite.

appuyez : déclenché après un appui rapide et complet

taphold (appuyez et maintenez) : déclenché après avoir appuyé et maintenu (environ une seconde)

swipe : un événement déclenché lorsque le déplacement horizontal est supérieur à 30 px ou que le déplacement vertical est inférieur à 20 px en une seconde. La durée et le nombre de pixels à faire glisser peuvent être définis. Cet événement a ses attributs associés, qui sont

scrollSupressionThreshold (par défaut : 10px) – Un glissement horizontal supérieur à cette valeur ne se déclenchera pas.
durationThreshold (par défaut : 1 000 ms) – Si le temps de glissement dépasse cette valeur, aucun événement glissant ne sera généré.
horizontalDistanceThreshold (par défaut : 30px) – Un événement de glissement se produira uniquement lorsque la distance de balayage horizontal dépasse cette valeur.
verticalDistanceThreshold (par défaut : 75px) – Un événement de glissement se produira uniquement si la distance de balayage vertical est inférieure à cette valeur.
swipeleft (swipe gauche) : déclenché lorsque l'événement swipe est dans la direction gauche

swiperight (swipe vers la droite) : déclenché lorsque l'événement swipe est dans la bonne direction

Pour lier ces événements, il vous suffit de programmer dans document.ready(), comme le montre l'exemple de code suivant :

<!DOCTYPE HTML>
<html>
<head>
 <title>Understanding the jQuery Mobile API</title>
 <link rel="stylesheet" href="jquery.mobile.css" />
 <script src="jquery.js"></script>
 <script type="text/java script">
  $(document).ready(function(){
   $(".tap-hold-test").bind("taphold", function(event) {
    $(this).html("Tapped and held");
   }); 
  });
 </script>
 <script src="jquery.mobile.js"></script>
</head>

<body>
 <div data-role="page" id="my-page">
  <div data-role="header">
      <h1>Header</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" id="my-list">
        <li class="tap-hold-test">Tap and hold test</li>
      </ul>
  </div>
 </div>
</body>
</html>

Copier après la connexion

Comme vous pouvez le voir dans le code ci-dessus, une liste est liée à l'événement taphold Lorsque le DOM est chargé et que l'événement taphold est déclenché, le message d'invite Tapped and hold s'affichera.

Événements de souris virtuelle
Nous proposons une série d'événements de souris "virtuels" dans le but d'abstraire les événements de souris et de toucher. Cela permet aux développeurs d'enregistrer des écouteurs pour les événements de souris de base tels que mousedown, mousemove, mouseup et click. Les plug-ins seront dans un environnement tactile et les plug-ins conserveront l'ordre dans lequel ils sont déclenchés dans un environnement de souris traditionnel. Par exemple : vmouseup est toujours déclenché avant vmousedown, vmousedown est toujours déclenché avant vmouseup, etc. Les événements de souris virtuelle normaliseront également les informations de coordonnées publiées par l'épée du livre. Par conséquent, les coordonnées des propriétés pageX, pageY, screenX, screenY, clientX et clientY de l'objet événement peuvent être utilisées dans les appareils tactiles.

vmouseover : gérer les événements normalisés de toucher ou de survol de la souris

vmousedown : gérer les événements normalisés de touchstart ou mousedown

vmousemove : gère les événements normalisés de touchmove ou mousemove

vmouseup : gérer les événements normalisés de touchend ou mouseup

vclick : gère les événements normalisés de toucher ou de clic de souris. Sur les appareils tactiles, cet événement est déclenché après l'événement vmouseup.

vmousecancel : gère l'événement normalisé de toucher ou de souris mousecancel

Attention : utilisez vclick avec prudence
Soyez prudent en utilisant vclick sur les appareils tactiles. Le navigateur basé sur Webkit générera des événements mousedown, mouseup et click 300 ms après le déclenchement de l'événement touchend. Les cibles de ces événements de souris générés sont calculées lorsqu'ils se déclenchent, en fonction de l'emplacement de l'événement tactile et, dans certains cas, peuvent entraîner différents calculs sur différents appareils ou même différents systèmes d'exploitation sur le même appareil. Cela signifie que l'élément cible de l'événement de clic d'origine peut ne pas être le même que l'élément cible de l'événement de souris généré par le navigateur lui-même.
Nous vous recommandons d'utiliser la méthode click au lieu de la méthode vclick dans les événements où le toucher peut modifier le contenu en dessous du point sur lequel vous avez cliqué. De tels événements incluent des transitions de page et d'autres comportements tels que le rétrécissement/l'étirement, qui peuvent entraîner une modification de l'écran ou le remplacement complet du contenu.

Annuler le comportement de clic par défaut d'un élément
L'application appelle un événement vclick pour annuler l'événement click par défaut pour un élément. Sur les appareils basés sur la souris, appeler la méthode PreventDefault() sur un événement vclick équivaut à appeler la méthode PreventDefault() sur la phase de bouillonnement temporel d'un clic réel. Sur les appareils tactiles, c'est un peu plus compliqué, car l'événement click réel sera déclenché 300 millisecondes après le déclenchement de l'événement vclick. Pour les appareils tactiles, l'appel de la méthode PreventDefault() sur l'événement vclick entraînera une partie du code dans le plug-in vmouse qui tentera de capturer l'événement de clic suivant. Ainsi, selon la mise en garde ci-dessus, il est difficile de faire correspondre un événement tactile avec son événement souris correspondant car leurs objectifs sont différents. Ainsi, les tentatives du plugin vmouse pour identifier un événement de clic correspondant via les coordonnées échoueront généralement.
Dans certains cas, la reconnaissance de la cible et des coordonnées des deux événements échouera, ce qui entraînera le déclenchement de l'événement click ou l'exécution de l'action par défaut de l'élément, ou lorsque le contenu est modifié ou remplacé, l'événement click d'autres éléments est déclenché. Si un tel bug se produit régulièrement sur un élément donné, nous vous recommandons d'utiliser le déclenchement par clic pour l'action.