父元素<a>標籤的預設行為以及click事件之間的相互影響-html教學-PHP中文網

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

不言

發布： 2018-08-08 14:28:00

原創

3077 人瀏覽過

這篇文章帶給大家的內容是關於父元素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標籤包裹了一層)。

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

執行動作：

#當點選父標籤時，先彈出111，然後跳到父標籤的href連結。
說明onclick執行先於href
當點擊child-one時，執行元素綁定的click事件，會彈出alert，但是location仍然跳到了father。
阻止冒泡後，執行結果仍然不符合預期。在新增preventDefault之後，執行了子元素自己的跳躍。
當點選child-two時，彈出回應訊息，然後會跳到href的連結。
當點選child-three時，先彈出click child-three，然後是href child-three，說明click事件先於href執行。

上面4個操作除了2之外都很好理解，2中，為什麼已經在阻止了事件冒泡之後，仍然執行了父元素中href #的跳躍。