Comment implémenter l'événement Tap pour éviter les bulles dans les compétences zepto.js_javascript

L'exemple de cet article décrit comment implémenter des événements tap pour éviter les bulles dans zepto.js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Je travaille actuellement sur une version mobile de mon site Web. Au départ, je voulais utiliser jQuery Mobile, mais le fichier était trop volumineux, j'ai donc utilisé zepto.js

Comme il y a un délai lors de l'utilisation des événements de clic sur les pages Web mobiles, l'événement tap dans zepto.js est utilisé.

En utilisant l'événement click, vous pouvez utiliser stopPropagation pour éviter les bulles, mais cette méthode n'est pas valide pour tap

Maintenant, je dois obtenir un tel effet : cliquez sur le bouton a.btn, puis affichez le div.panel, et masquez le div.panel lorsque je clique sur un non-div.panel

$("a.btn").on("tap",function(e){
  e.stopPropagation();//该方法不起作用
  $("div.panel").show();
});
$(document).on("tap",function(e){
  $("div.panel").hide();
});

Grâce aux outils de débogage, nous pouvons constater qu'il y a un attribut cible dans l'objet e, nous pouvons donc utiliser cet attribut pour obtenir l'effet souhaité :

$("a.btn").on("tap",function(){
  $("div.panel").show();
});
$(document).on("tap",function(e){
  if(!$(e.target).hasClass("btn")){
    $("div.panel").hide();
  }
});

C'est la solution

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