親要素の タグのデフォルトの動作とクリック イベント間の相互作用

この記事は、親要素 a タグの href のデフォルト動作と、子要素にバインドされたクリック イベントへの応答との間の影響について説明しています。必要な場合は、それを参照してください。それがあなたを助けることを願っています。

開発プロセス中に問題が発生しました。実行環境はChrome 68です

この問題について説明します。 a タグ内にネストがある場合、親要素である a タグと子要素にバインドされた click イベント 応答に影響があります。ページ構造:

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>

例は以下のとおりです(aタグがネストされているとブラウザが正しく解析しないため、objectタグで囲っています)。

次の操作を実行します:

1. 親タグをクリックすると、最初に111がポップアップ表示され、その後親タグのhrefリンクにジャンプします。
   href

2. より前にonclickが実行される説明

   
   preventDefault之后，执行了子元素自己的跳转。

3. 当点击child-two时，弹出响应信息，然后会跳转href的链接。

4. 当点击child-three时，先弹出click child-three，然后是href child-three，说明click事件先于href执行。

上面4个操作除了2之外都很好理解，2中，为什么已经在阻止了事件冒泡之后，仍然执行了父元素中href的跳转。

思考：

首先可以肯定的是，事件冒泡确实被阻止了，因为父元素的onclick并没有执行。
所以猜测，标签的默认行为是无法通过取消冒泡来阻止的，就算事件没有冒泡到父元素，子元素在父元素<a></a>标签内部，仍然会执行<a></a>标签默认行为。

解决方法：

在子元素中添加e.preventDefault()阻止默认行为

父元素不使用<a></a>标签，使用其他标签绑定click事件且子元素阻止冒泡

父元素不使用href属性，直接在<a></a>

child-oneをクリックすると要素にバインドされたclickイベントが実行されアラートがポップアップしますが、やはり場所はfatherにジャンプします。

バブリングを防止した後も、実行結果は期待どおりではありません。 preventDefault を追加すると、子要素自体のジャンプが実行されます。

child-two をクリックすると、応答メッセージがポップアップ表示され、href リンクにジャンプします。

child-three をクリックすると、最初に click child-three がポップアップし、次に href child-three がポップアップ表示され、クリック イベントが href の前に実行されることを示します。

上記の 4 つの操作は、2 を除いてすべて理解するのが簡単です。2 では、イベントのバブリングを防止した後も親要素の href のジャンプが実行されるのはなぜですか? 🎜🎜考え: 🎜🎜 まず第一に、親要素の onclick が実行されないため、イベントのバブリングが実際にブロックされていることは確かです。 🎜つまり、 タグのデフォルトの動作は、イベントが親要素までバブルアップしない場合でも、親要素 <a> 内にあるので防ぐことはできないと思います。 </a> タグ。<a></a> タグのデフォルトの動作は引き続き実行されます。 🎜🎜解決策: 🎜🎜デフォルトの動作を防ぐために子要素に e.preventDefault() を追加します 🎜🎜親要素は <a></a> タグを使用しません。他のタグを使用してバインドします。クリック イベントを設定し、子要素のバブリングを防ぎます🎜🎜親要素は href 属性を使用せず、クリック イベントを <a> tag🎜🎜おすすめ関連記事: 🎜🎜🎜リンクタグリンクCSSと@import読み込みの違いは何ですか？ 🎜🎜🎜🎜HTMLタグ：imgタグの使い方まとめ🎜🎜🎜🎜</a>

以上が親要素の タグのデフォルトの動作とクリック イベント間の相互作用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。