jquery cliquez autour de div pour masquer div

En développement web, il est souvent nécessaire d'implémenter la fonction de masquage d'un élément lorsqu'un autre élément est cliqué. Ceci est particulièrement courant lors de la mise en œuvre de certains effets interactifs. Cet article explique comment utiliser jQuery pour implémenter la fonction de masquage d'un div lorsque vous cliquez dessus.

Utilisez jQuery pour gérer les événements

Afin d'implémenter la fonction de masquage du div lorsque vous cliquez autour du div, nous devons utiliser la fonction de traitement des événements de jQuery. Dans jQuery, la liaison d'événement peut utiliser la méthode .on(). Par exemple, le code pour lier un événement de clic est le suivant :

$(document).on('click', function() {
  // 隐藏div的代码
});

Ce code liera l'événement de clic à l'ensemble du document lorsqu'un élément du document l'est. cliqué Cet événement sera déclenché à chaque fois.

Déterminez le div cible

Ensuite, nous devons déterminer le div que nous voulons masquer. Cet article supposera que l'identifiant de ce div est "cible", et nous pouvons l'obtenir en utilisant le sélecteur de jQuery. Par exemple, le code pour obtenir ce div est le suivant :

var targetDiv = $('#target');

Gestion des événements de clic

Lorsque l'événement de clic se produit, nous devons vérifier si l'élément cliqué est autour du div cible, si c'est le cas, ne faites rien, sinon, masquer le div cible. Afin de déterminer si l'élément cliqué se trouve autour du div cible, nous devons utiliser les propriétés fournies par l'objet événement de jQuery, notamment les coordonnées de la page, les coordonnées de l'élément et la taille de l'élément.

Obtenir la position du clic

Tout d'abord, nous devons obtenir la position du clic. L'objet événement de jQuery fournit les coordonnées de la page et les coordonnées des éléments. Nous pouvons utiliser les propriétés pageX et pageY pour obtenir les coordonnées de la page, et utiliser la méthode offset() pour obtenir les coordonnées des éléments. Par exemple, le code pour obtenir la position du clic de souris est le suivant :

$(document).on('click', function(e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
});

Obtenir la position et la taille du div cible

Ensuite, nous devons obtenir la position et la taille du div cible. Nous pouvons utiliser les méthodes offset(), externalWidth() et externalHeight() pour obtenir la position et la taille du div cible. Par exemple, le code pour obtenir le div cible est le suivant :

var targetDiv = $('#target');
var targetX = targetDiv.offset().left;
var targetY = targetDiv.offset().top;
var targetWidth = targetDiv.outerWidth();
var targetHeight = targetDiv.outerHeight();

Déterminer si le clic est autour du div cible

Avec la position du clic ainsi que la position et la taille du div cible, nous pouvons déterminer si le clic est autour la division cible. La méthode de jugement est que si l'abscisse de la position du clic de la souris est à gauche ou à droite du div cible, ou si l'ordonnée est au-dessus ou en dessous du div cible, le clic est considéré comme étant autour du div cible. Par exemple, le code pour déterminer si le clic est autour du div cible est le suivant :

if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
  // 点击在目标div周围，需要隐藏目标div
} else {
  // 点击在目标div内部或边缘，不需要隐藏目标div
}

Masquer le div cible

Enfin, si le clic n'est pas autour du div cible, nous devons masquer le div cible. Le masquage d’éléments peut être réalisé à l’aide de la méthode .hide(). Par exemple, le code pour masquer le div cible est le suivant :

targetDiv.hide();

Code complet

Enfin, nous intégrons tous les codes ci-dessus ensemble et obtenons le code complet comme suit :

$(document).on('click', function(e) {
  var targetDiv = $('#target');
  var targetX = targetDiv.offset().left;
  var targetY = targetDiv.offset().top;
  var targetWidth = targetDiv.outerWidth();
  var targetHeight = targetDiv.outerHeight();
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  
  if (mouseX < targetX || mouseX > targetX + targetWidth || mouseY < targetY || mouseY > targetY + targetHeight) {
    targetDiv.hide();
  }
});

Cliquez autour du div pour masquer le div.

Résumé

Cet article explique comment utiliser jQuery pour masquer les divs autour des divs cliquables. La clé pour réaliser cette fonction est d'utiliser les méthodes de gestion des événements jQuery et de manipulation DOM, ainsi que d'utiliser les sélecteurs et attributs de jQuery pour obtenir la position et la taille du div cible. Cette méthode peut être étendue à d'autres éléments, tels que des boutons, des fenêtres pop-up, etc., offrant ainsi de bons effets interactifs pour le développement Web.

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!