jquery klicken Sie um div herum, um div auszublenden

In der Webentwicklung ist es oft notwendig, die Funktion zu implementieren, ein Element auszublenden, wenn auf ein anderes Element geklickt wird. Dies ist besonders häufig bei der Implementierung einiger interaktiver Effekte der Fall. In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktion implementieren, ein Div auszublenden, wenn Sie darauf klicken.

Verwenden Sie jQuery, um Ereignisse zu verarbeiten

Um die Funktion zum Ausblenden des Div beim Klicken um das Div zu implementieren, müssen wir die Ereignisverarbeitungsfunktion von jQuery verwenden. In jQuery kann die Ereignisbindung die Methode .on() verwenden. Der Code zum Binden eines Klickereignisses lautet beispielsweise wie folgt:

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

Dieser Code bindet das Klickereignis an das gesamte Dokument angeklickt Dieses Ereignis wird jedes Mal ausgelöst.

Bestimmen Sie das Ziel-Div

Als nächstes müssen wir das Div bestimmen, das wir ausblenden möchten. In diesem Artikel wird davon ausgegangen, dass die ID dieses Div „Ziel“ ist, und wir können sie mithilfe des Selektors von jQuery abrufen. Der Code zum Abrufen dieses Div lautet beispielsweise wie folgt:

var targetDiv = $('#target');

Klickereignisse verarbeiten

Wenn das Klickereignis auftritt, müssen wir prüfen, ob sich das angeklickte Element in der Nähe des Ziel-Div befindet. Wenn ja, unternehmen Sie nichts. Wenn nicht, Verstecke das Ziel-Div. Um festzustellen, ob sich das angeklickte Element in der Nähe des Ziel-Div befindet, müssen wir die vom Ereignisobjekt von jQuery bereitgestellten Eigenschaften verwenden, einschließlich Seitenkoordinaten, Elementkoordinaten und Elementgröße.

Ermitteln Sie die Klickposition

Zuerst müssen wir die Klickposition ermitteln. Das Ereignisobjekt von jQuery stellt Seitenkoordinaten und Elementkoordinaten bereit. Wir können die Eigenschaften pageX und pageY verwenden, um Seitenkoordinaten zu erhalten, und die Methode offset() verwenden, um Elementkoordinaten zu erhalten. Der Code zum Ermitteln der Mausklickposition lautet beispielsweise wie folgt:

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

Position und Größe des Ziel-Div abrufen

Als nächstes müssen wir die Position und Größe des Ziel-Div ermitteln. Wir können die Methoden „offset()“, „outerWidth()“ und „outerHeight()“ verwenden, um die Position und Größe des Ziel-Div zu ermitteln. Der Code zum Abrufen des Ziel-Div lautet beispielsweise wie folgt:

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

Bestimmen Sie, ob der Klick um das Ziel-Div herum erfolgt.

Mit der Klickposition sowie der Position und Größe des Ziel-Div können wir feststellen, ob der Klick um das Ziel-Div herum erfolgt die Zieldiv. Die Beurteilungsmethode besteht darin, dass, wenn sich die Abszisse der Mausklickposition links oder rechts vom Ziel-Div befindet oder die Ordinate über oder unter dem Ziel-Div liegt, davon ausgegangen wird, dass sich der Klick um das Ziel-Div herum befindet. Der Code zum Bestimmen, ob sich der Klick um das Ziel-Div herum befindet, lautet beispielsweise wie folgt:

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

Hide the target div

Wenn sich der Klick schließlich nicht um das Ziel-Div herum befindet, müssen wir das Ziel-Div ausblenden. Das Ausblenden von Elementen kann mit der Methode .hide() erreicht werden. Der Code zum Ausblenden des Ziel-Div lautet beispielsweise wie folgt:

targetDiv.hide();

Vollständiger Code

Schließlich integrieren wir alle oben genannten Codes zusammen und erhalten den vollständigen Code wie folgt:

$(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();
  }
});

Klicken Sie um das Div herum, um das Div auszublenden.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jQuery Divs um anklickbare Divs herum ausblenden. Der Schlüssel zum Erreichen dieser Funktion liegt in der Verwendung von jQuery-Methoden zur Ereignisbehandlung und DOM-Manipulation sowie in der Verwendung der Selektoren und Attribute von jQuery, um die Position und Größe des Ziel-Div zu ermitteln. Diese Methode kann auf andere Elemente wie Schaltflächen, Popup-Fenster usw. erweitert werden und bietet so gute interaktive Effekte für die Webentwicklung.

Das obige ist der detaillierte Inhalt vonjquery klicken Sie um div herum, um div auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!