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

Le contenu de cet article concerne l'influence entre le comportement par défaut href de l'élément parent d'une balise et la réponse de l'événement click lié à l'élément enfant. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. , j'espère que cela vous aidera.

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 :

Tout d'abord, il est certain que le bouillonnement d'événements est bien bloqué car le onclick de l'élément parent n'est pas exécuté.
Donc, je suppose que le comportement par défaut de la balise ne peut pas être empêché en annulant le bouillonnement. Même si l'événement ne remonte pas jusqu'à l'élément parent, l'élément enfant s'exécutera toujours <a></a> à l'intérieur du balise de l'élément parent. Comportement par défaut de l'étiquette. <a></a>

Solution :

Ajoutez

dans l'élément enfant pour empêcher le comportement par défaute.preventDefault()

L'élément parent n'utilise pas la balise

, utilisez d'autres balises pour lier les événements de clic et l'enfant L'élément empêche le bouillonnement <a></a>

L'élément parent n'utilise pas l'attribut

et lie l'événement de clic directement à la balise href <a></a>

Articles connexes recommandés :

lien Quelle est la différence entre le lien balisé CSS et le chargement @import ?

Balise HTML : Résumé de l'utilisation de la balise img

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!