父元素標籤的預設行為以及click事件之間的相互影響

這篇文章帶給大家的內容是關於父元素a標籤的href預設行為以及子元素綁定的click事件的回應之間存在影響，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

開發過程中遇到問題，簡單寫個demo   運行環境為Chrome 68

描述這個問題，當a標籤內部存在嵌套時， 父元素a標籤的href預設行為以及子元素綁定的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連結。
   說明onclick執行先於href

2. 當點擊child-one時，執行元素綁定的click事件，會彈出alert，但是location仍然跳到了father。
   阻止冒泡後，執行結果仍然不符合預期。在新增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>標籤，使用其他標籤綁定click事件且子元素阻止冒泡</a>

父元素不使用href屬性，直接在<a></a>標籤上綁定click事件

相關文章推薦：

link標籤連結CSS和@import載入有什麼不同？

HTML標籤：img標籤的用法摘要

#

以上是父元素標籤的預設行為以及click事件之間的相互影響的詳細內容。更多資訊請關注PHP中文網其他相關文章！