Das Standardverhalten des -Tags des übergeordneten Elements und die Interaktion zwischen Klickereignissen

Der Inhalt dieses Artikels befasst sich mit dem Einfluss zwischen dem href-Standardverhalten des übergeordneten Elements und der Reaktion des an das untergeordnete Element gebundenen Klickereignisses. Es hat einen bestimmten Referenzwert. , hoffe es hilft dir.

Ich bin während des Entwicklungsprozesses auf ein Problem gestoßen. Die laufende Umgebung ist Chrome 68.

Beschreiben Sie dieses Problem, wenn innerhalb des a-Tags eine Verschachtelung auftritt Das Verhalten des übergeordneten Elements und eines Tags hat Auswirkungen auf die Reaktion auf das an das untergeordnete Element gebundene Klickereignis. Seitenstruktur:

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>a标签内部点击事件失效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            display: block;
            width: 500px;
            height: 200px;
            background-color: rgb(210, 111, 30);
        }

        .child-one {
            display: block;
            width: 200px;
            height: 50px;
            background-color: rgb(174, 43, 226);
        }

        .child-two {
            display: block;
            width: 200px;
            height: 50px;
            background-color: rgb(43, 226, 67);
        }

        .child-three {
            display: block;
            width: 200px;
            height: 50px;
            background-color: rgb(43, 137, 226);
        }
    </style>



    <a>父标签
        <span>
            子标签1
        </span>
        <object>
            <a>
                子标签2
            </a>
        </object>
        <object>
            <a>
                子标签3
            </a>
        </object>
    </a>
    <script>    
        let father = document.querySelector(&#39;.father&#39;);
        let ele1 = document.querySelector(&#39;.child-one&#39;);
        let ele2 = document.querySelector(&#39;.child-two&#39;);
        let ele3 = document.querySelector(&#39;.child-three&#39;);

        ele1.addEventListener(&#39;click&#39;, function (e) {
            e.stopPropagation();
            // e.preventDefault();
            alert(&#39;click child-one&#39;)
            window.location.href = &#39;child-one&#39;
        }, false)

        ele2.addEventListener(&#39;click&#39;, function (e) {
            e.stopPropagation();
            alert(&#39;click child-two&#39;)
            // window.location.href=&#39;child-two&#39;
        }, false)

        ele3.addEventListener(&#39;click&#39;, function (e) {
            alert(&#39;click child-three&#39;)
            window.location.href = &#39;child-three&#39;
        }, false)

        father.addEventListener(&#39;click&#39;, function (e) {
            alert(&#39;click father&#39;)
            window.location.href = &#39;father&#39;
        }, false)

    </script>

Das Beispiel sieht wie unten gezeigt aus (wenn das Tag „a“ verschachtelt ist, analysiert der Browser es falsch, sodass es mit einem Objekt-Tag umschlossen wird).

Führen Sie den Vorgang aus:

1. Wenn auf das übergeordnete Tag geklickt wird, erscheint zuerst 111 und Springt dann zum übergeordneten href-Link des Tags.
   Gibt an, dass onclick vor href ausgeführt wird

2. Wenn auf child-one geklickt wird, wird das an das Element gebundene Click-Ereignis ausgeführt und eine Warnung wird angezeigt, die Position springt jedoch weiterhin zum Vater.
   Nachdem die Blasenbildung verhindert wurde, entsprechen die Ausführungsergebnisse immer noch nicht den Erwartungen. Nach dem Hinzufügen von preventDefault wird der eigene Sprung des untergeordneten Elements ausgeführt.

3. Wenn auf „Kind-zwei“ geklickt wird, wird eine Antwortnachricht angezeigt und der Href-Link springt.

4. Wenn auf „Kind-drei“ geklickt wird, wird zuerst click child-three und dann href child-three angezeigt, was darauf hinweist, dass das Klickereignis vor dem href ausgeführt wird.

Die oben genannten vier Operationen sind bis auf 2 leicht zu verstehen. Warum wird in 2 der Sprung von href im übergeordneten Element immer noch ausgeführt, nachdem verhindert wurde, dass das Ereignis sprudelt?

Denken:

Zuallererst ist es sicher, dass das Event-Bubbling tatsächlich blockiert ist, weil der Onclick des übergeordneten Elements nicht ausgeführt wird.
Ich vermute also, dass das Standardverhalten des -Tags nicht durch das Abbrechen des Bubblings verhindert werden kann. Auch wenn das Ereignis nicht zum übergeordneten Element übergeht, wird das untergeordnete Element trotzdem <a></a> innerhalb des Tag des übergeordneten Elements. <a></a>

Lösung:

Fügen Sie

im untergeordneten Element hinzu, um das Standardverhalten zu verhindern.e.preventDefault()

Das übergeordnete Element verwendet nicht das

-Tag. Verwenden Sie zum Binden andere Tags Klickereignisse und das untergeordnete Element verhindern Sprudeln <a></a>

Das übergeordnete Element verwendet nicht das

-Attribut und bindet das Klickereignis direkt an das href-Tag <a></a>

Empfohlene verwandte Artikel:

link Was ist der Unterschied zwischen Tagged-Link-CSS und @import-Laden?

HTML-Tag: Zusammenfassung der Verwendung des IMG-Tags

Das obige ist der detaillierte Inhalt vonDas Standardverhalten des -Tags des übergeordneten Elements und die Interaktion zwischen Klickereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!