Wie kann verhindert werden, dass übergeordnete Klickereignisse ausgelöst werden, wenn auf einen untergeordneten Anker geklickt wird?

Verhindern der Auslösung übergeordneter Ereignisse durch Klicks auf untergeordnete Anker

Bei der Webprogrammierung ist es häufig erforderlich, anklickbare Elemente in anderen anklickbaren Elementen zu verschachteln. Wenn jedoch innerhalb eines anklickbaren übergeordneten Elements auf ein Ankerelement (ein „a“-Tag) geklickt wird, können beide Klickereignisse ausgelöst werden, was zu unerwünschtem Verhalten führt.

Problemdefinition:

Das Ziel besteht darin, zu verhindern, dass das Onclick-Ereignis des übergeordneten Elements ausgelöst wird, wenn auf ein untergeordnetes Ankerelement geklickt wird. Dadurch wird sichergestellt, dass nur die vom Anker beabsichtigte Aktion ausgeführt wird.

Lösung 1: Überprüfen des Ereignisursprungs

jQuery stellt ein „eventargs“-Objekt bereit, das Informationen über den Ursprung des Ereignisses enthält. Indem wir die Eventargs im Onclick-Handler des übergeordneten Elements überprüfen, können wir feststellen, ob der Klick vom Anker stammt:

$("#clickable").click(function(e) {
    if($(e.target).is("div")) {
        window.location = url;
        return true;
    }
});

In diesem Code prüfen wir, ob das Ziel des Ereignisses das „div“-Element ist. Wenn ja, lösen wir die übergeordnete Aktion aus (Weiterleitung zu einer bestimmten URL).

Lösung 2: Event-Bubbling stoppen

Event-Bubbling bezieht sich auf die Ausbreitung eines Ereignisses durch der DOM-Baum. Indem wir dem Anker einen Click-Handler hinzufügen und darin „e.stopPropagation()“ aufrufen, können wir verhindern, dass das Ereignis zum übergeordneten Element übergeht:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Dieser Ansatz stoppt sofort die Fortsetzung des Ereignisses seine Aufwärtsreise im DOM, um sicherzustellen, dass nur die Aktion des Ankers ausgeführt wird.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass übergeordnete Klickereignisse ausgelöst werden, wenn auf einen untergeordneten Anker geklickt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!