Maison > interface Web > js tutoriel > jQuery masque la fonction DIV en cliquant n'importe où sauf dans la zone spécifiée

jQuery masque la fonction DIV en cliquant n'importe où sauf dans la zone spécifiée

韦小宝
Libérer: 2018-01-08 10:52:45
original
1659 Les gens l'ont consulté

Cet article présente principalement les informations liées à jQuery cachées en cliquant n'importe où sauf dans la zone désignée. Le code est simple et facile à comprendre, très bon, et a la valeur de référence et d'apprentissage de jquery. intéressé par jquery Vous pouvez vous référer à cet article

Le code spécifique est le suivant :


$('body').click(function(e) {
  var target = $(e.target);
  // 如果#overlay或者#btn下面还有子元素,可使用
  // !target.is('#btn *') && !target.is('#overlay *')
  if(!target.is('#btn') && !target.is('#overlay')) {
    if ( $('#overlay').is(':visible') ) { 
      $('#overlay').hide();                          
    }
  }
});
Copier après la connexion


ou


$('body').click(function(e) {
  if(e.target.id != 'btn' && e.target.id != 'overlay')
   if ( $('#overlay').is(':visible') ) {
     $('#overlay').hide();
   }
})
Copier après la connexion


PS : Regardons un morceau de code jquery ci-dessous. Cliquez sur d'autres endroits sauf lui-même pour le cacher

.


$("#test").click(function(e) { 
  e?e.stopPropagation():event.cancelBubble = true; 
}); 
$(document).click(function() { 
  $("#test").fadeOut(); 
<pre name="code" class="html">e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件
});
 

Copier après la connexion


Résumé

Ce qui précède est le jQuery introduit par l'éditeur à l'exception de la zone désignée. Cliquez n'importe où pour masquer p, j'espère que cela aidera tout le monde ! !

Recommandations associées :

Jquery clique sur le bouton pour soumettre le formulaire de manière asynchrone et synchrone

jQuery clique sur l'entrée pour déplacer le curseur vers la dernière position ou la position spécifiée

jQuery clique sur la zone de saisie pour afficher l'image du code de vérification

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal