Comment implémenter jQuery pour faire disparaître le menu en cliquant ailleurs_jquery

L'exemple de cet article décrit comment implémenter jQuery pour faire disparaître le menu lorsque vous cliquez ailleurs. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

Le truc est comme ça. Par exemple, si je clique sur un div, un menu s'affichera. Lorsque je clique ailleurs, le menu disparaît. Une idée est de lier un événement de clic au document. cliqué, le menu sera affiché. Si le document est cliqué, le menu sera affiché. Cachez simplement le menu, mais si vous cliquez sur le div, cela équivaut à cliquer sur le document, donc exécutez l'instruction à exécuter dans. l'événement click du div, puis terminez le bouillonnement de js, sinon l'événement click du div sera exécuté et continuera à bouillonner. Accédez à l'événement document et exécutez le contenu click du document

Ce que je veux dire, c'est que div appartient également au document, donc cliquer sur div clique également sur le document. Par conséquent, sans aucune restriction, en cliquant sur div, les méthodes de div et de document seront exécutées. est dans Cliquez sur la méthode div pour arrêter le bouillonnement. La méthode spécifique consiste à utiliser la méthode e.stopPropagation() → "applicable aux non-ie". Si c'est le cas, e.cancelBubble=true

Une autre idée est de déterminer quelle source de déclenchement est la méthode de clic du document. S'il s'agit d'un div, aucune opération ne sera effectuée, c'est-à-dire un retour. Si ce n'est pas un div, alors le menu sera masqué. suit

L'objet événement contient un attribut important : target(W3C)/srcElement(IE). Cet attribut identifie l'élément d'origine qui a déclenché l'événement. La deuxième idée est d'utiliser cet attribut. Nous pouvons directement lier un gestionnaire d'événements à l'événement click du document et déterminer dans le gestionnaire d'événements si la source de l'événement est l'élément div avec id==test ou son sous-élément. Si tel est le cas, le retour de la méthode n'effectue aucun résultat. opération. Sinon, l’événement est masqué div.

$(document).bind('click',function(e){
    var e = e || window.event; //浏览器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Un résumé des techniques de données json du fonctionnement jQuery", "Un résumé spécial de commutation jQuery effets et techniques", " Résumé des effets et techniques spéciaux de glisser-déposer jQuery", "Résumé des techniques d'extension jQuery", "Résumé des jQuery classiques courants effets spéciaux", "animation jQuery et effets spéciaux Résumé de l'utilisation ", "Résumé de l'utilisation du sélecteur jquery " et "Plug-ins communs jQuery et résumé de l'utilisation "

J'espère que cet article sera utile à tous ceux qui programment jQuery.