Dynamische Elemente, statische Elemente, Event-Handler und ihre Komplexität

Das Arbeiten mit gestapelten Elementen auf einer Seite, von denen einige Anker und andere Elemente mit Event-Handlern sind, kann manchmal zu seltsamem Verhalten führen.

Letztendlich hat alles mit der Ereignisausbreitung zu tun, aber wenn Sie sich nicht damit befassen mussten (oder Ereignisblasen oder ähnliches), kann es eine kleine Herausforderung sein.

Und hier ist ein Beispiel: Was ist, wenn Sie ein Bild haben, das in einen Anker eingeschlossen ist? Was passiert, wenn ein dynamisches Element, das über JavaScript platziert wird, nachdem die Seite geladen wurde, ein anderes dynamisches Element lädt? Darüber hinaus möchten Sie verhindern, dass die Seite weitergeleitet wird, wenn auf das dynamische Element geklickt wird, aber weiterhin weitergeleitet wird, wenn auf das Bild geklickt wird?

Es mag einfach klingen – und in einigen Fällen ist es das auch – aber wenn Sie ein transparentes Element haben, das das gesamte Originalbild überlagert, kann es zu einer ganz anderen Herausforderung werden.

Hier kommt das Verständnis von Ereigniszielen ins Spiel. Aber bevor ich auf die Lösung eingehe, werde ich versuchen, alles in einer einfacheren Erklärung zusammenzufassen und zu skizzieren, wie es im DOM gerendert wird.

Dynamische Elemente, statische Elemente und Ereignishandler

Versuchen Sie also, sich Folgendes vorzustellen: Sie haben …

• Eine Seite mit einem Bild, und das Bild ist in einen Anker eingeschlossen, der Sie beispielsweise zu einer anderen Seite führt.
• Beim Laden der Seite werden zwei dynamische Elemente erstellt. Wenn auf das erste geklickt wird, sollte es das zweite dynamische Element anzeigen.
• Wenn auf die erste Dynamik geklickt wird, sollte die Seite nicht umgeleitet werden.
• Wenn auf das Originalbild geklickt wird, sollte es sich wie erwartet verhalten.

Der schwierige Teil dabei ist, dass die dynamischen Elemente auf der bestehenden Kombination aus Anker und Bild platziert werden.

Ein Blick auf das DOM

Dies bedeutet, dass das DOM in etwa so aussehen würde:

Hinweis im Bild über dem Anker löst das Bild aus, und das dynamische Element löst die dynamische Überlagerung aus .

Wie können wir also das zweite dynamische Element anzeigen, wenn auf das erste geklickt wird, ohne die Seite zu verlassen? Sie können dies tun, indem Sie das Ziel des ausgelösten Ereignisses untersuchen.

Der Code für die Behandlung von Ereignissen

Ich werde unten jQuery verwenden, da die meisten meiner Leser mit WordPress arbeiten und WordPress mit jQuery ausgeliefert wird, aber dies kann auch mit Vanille-JavaScript gehandhabt werden (aber der Versuch, diesen Weg einzuschlagen, ist mehr, als ich in diesem Zusammenhang erklären möchte Post).

Nachdem dies gesagt wurde, hier ist das Wesentliche, von dem ich erklären werde, was mit dem Code los ist:

$('.acme-element').each(function(e) { 
  var $anchor = $(this).parents('a');
  $(this).on('click', function(evt) {
    if(e.target !== this) {
      evt.preventDefault();
    }
    // Here, you may want to action to redirect to an original anchor.
  });
});

Erstens gehe ich davon aus, dass es mehrere dynamische Elemente gibt, daher der Grund für jeden Iterator.

Als Nächstes erstellt es einen Verweis auf das Ankerelement, das ein Elternelement der aktuellen Instanz des dynamischen Elements ist (die Verwendung von var ist hier wichtig, damit es immer auf das Element verweist, das das Elternelement der aktuellen Instanz der Iteration ist, anstatt eine vorherige Instanz zu überschreiben ).

Wenn auf das Element geklickt wird, richten wir einen Klick -Handler ein, damit wir uns das Ziel des Ereignisses des Klick-Ereignisses ansehen können. Hier wird es etwas verwirrend.

Wir haben e- und evt- Variablen, die sich jeweils auf den Event-Handler für ein bestimmtes Element beziehen. Im obigen Code:

• e bezieht sich auf das Ereignis, das an unser dynamisches Element gebunden ist,
• evt bezieht sich auf das Element, wirkt sich aber auch auf den Ereignis-Bubbling-Prozess aus, was bedeutet, dass es Ereignisse im gesamten restlichen DOM auslöst.

Und daher werten wir in unserer Bedingung das Ziel des ersten Ereignishandlers aus, um sicherzustellen, dass es nicht mit dem spezifischen Element übereinstimmt. Von dort aus können Sie, wie Sie im Codekommentar sehen können, bestimmen, wie Sie fortfahren möchten (wie vielleicht fortfahren und ihn an anderer Stelle navigieren lassen oder etwas anderes tun).

Letztendlich ist es Ihr Anruf. Aber wenn Sie mit dynamischen Elementen, statischen Elementen und Event-Handlern in Konflikt geraten, kann es schnell kompliziert werden.