Le comportement par défaut de la balise de l'élément parent et l'interaction entre les événements de clic

J'ai rencontré un problème lors du processus de développement. J'ai simplement écrit une démo. L'environnement d'exécution est Chrome 68.

Décrivez ce problème lorsqu'il y a une imbrication dans la balise a, la valeur par défaut. comportement de l'élément parent une balise Il y a un impact sur la réponse à l'événement click lié à l'élément enfant. Structure de la page :

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>

L'exemple est le suivant (si la balise a est imbriquée, le navigateur l'analysera de manière incorrecte, elle est donc enveloppée avec une balise d'objet).

Effectuez l'opération :

1. Lorsque l'on clique sur la balise parent, 111 apparaît en premier, et puis passe au parent Le lien href de la balise.
   Indique que onclick est exécuté avant href

2. Lorsque l'enfant-un est cliqué, l'événement de clic lié à l'élément est exécuté et une alerte apparaîtra, mais l'emplacement saute toujours au père.
   Après avoir évité le bouillonnement, les résultats d'exécution ne répondent toujours pas aux attentes. Après avoir ajouté preventDefault, le propre saut de l'élément enfant est effectué.

3. Lorsque l'enfant-deux est cliqué, un message de réponse apparaîtra et le lien href sautera.

4. Lorsque l'enfant-trois est cliqué, click child-three apparaît en premier, puis href child-three, indiquant que l'événement de clic est exécuté avant le href.

Les quatre opérations ci-dessus sont toutes faciles à comprendre sauf 2. En 2, pourquoi le saut de href dans l'élément parent est-il toujours exécuté après avoir empêché l'événement de bouillonner ?

Réflexion :