Maison  >  Article  >  interface Web  >  Jquery a-t-il une fonction tactile ?

Jquery a-t-il une fonction tactile ?

WBOY
WBOYoriginal
2022-06-09 18:27:212292parcourir

Il existe une fonction tactile dans jquery ; la fonction tactile sera déclenchée lorsque l'utilisateur touche la page : 1. L'événement tap est déclenché lorsque l'utilisateur appuie sur un élément ; 2. L'événement taphold est déclenché lorsque l'utilisateur appuie sur un élément ; et le maintient pendant une seconde Déclenché ; 3. L'événement swipe est déclenché lorsque l'utilisateur glisse de plus de 30 px horizontalement sur un élément ; 4. L'événement swipeleft est déclenché lorsque l'utilisateur glisse de plus de 30 px depuis la gauche sur un élément ; . L'événement swiperight est déclenché lorsque l'utilisateur glisse de plus de 30px depuis la gauche sur un élément. Déclenché lors d'un glissement de plus de 30px depuis la droite.

Jquery a-t-il une fonction tactile ?

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.

Jquery a-t-il une fonction tactile ?

L'événement Touch est déclenché lorsque l'utilisateur touche l'écran (page). L'événement

  • tap est déclenché lorsque l'utilisateur appuie sur un élément.

  • l'événement taphold est déclenché lorsque l'utilisateur appuie sur un élément et le maintient pendant une seconde

  • l'événement swipe est déclenché lorsque l'utilisateur glisse de plus de 30 pixels horizontalement sur un élément :

  • l'événement swipeleft est déclenché lorsque l'utilisateur l'utilisateur est activé L'événement swiperight est déclenché lorsque l'utilisateur glisse de plus de 30px depuis la gauche sur un élément :

  • L'événement swiperight est déclenché lorsque l'utilisateur glisse de plus de 30px depuis la droite sur un élément :

Simple explication :

tap (tap) : Déclenché après un tapotement rapide et complet

taphold (taphold) : Déclenché après avoir tapé et non relâché (environ une seconde)

swipe (swipe) : en une seconde, la traînée horizontale est plus grande supérieur à 30PX, ou la traînée verticale est inférieure à l'événement déclenché lorsque l'événement 20px se produit. La durée et le nombre de pixels à faire glisser peuvent être définis. Cet événement a ses propriétés associées, qui sont

  • scrollSupressionThreshold (par défaut : 10px) – si le glissement horizontal est supérieur à cette valeur, il ne sera pas déclenché.

  • durationThreshold (par défaut : 1000ms) – Si le temps de glissement dépasse cette valeur, aucun événement de glissement ne sera généré.

  • horizontalDistanceThreshold (par défaut : 30px) – Un événement de glissement ne se produira que lorsque la distance de balayage horizontal dépasse cette valeur.

  • verticalDistanceThreshold (par défaut : 75px) – Un événement de glissement ne se produira que lorsque la distance de balayage vertical est inférieure à cette valeur.

swipeleft (balayage vers la gauche) : déclenché lorsque l'événement de balayage est dans la direction gauche

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

Exemples sont les suivants :

appuyez (appui léger) : déclenchez après un appui rapide et complet

$(function(){
      $("#home").live('tap', function() {
        $('#toPage2').click(); // 为首页绑定点击事件
      });
      $("#page-2").live('tap', function() {
        $('#toHome').click(); // 为另一页面绑定点击事件
      });
    });

taphold (appuyez et maintenez) : appuyez et maintenez (environ une seconde) avant de déclencher

$(function(){
      $("#home").live('taphole', function() {
        $('#toPage2').click(); // 为首页绑定长按事件
      });
      $("#page-2").live('taphole', function() {
        $('#toHome').click(); // 为另一页面绑定长按事件
      });
    });

swipe (swipe) : faites glisser vers la gauche et la droite comme vous le souhaitez

$(function(){
      $("#home").live('swipe', function() {
        $('#toPage2').click(); // 为首页绑定滑动事件
      });
      $("#page-2").live('swipe', function() {
        $('#toHome').click(); // 为另一页面绑定滑动事件
      });
    });

tutoriel vidéo Recommandé : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn