這篇文章帶給大家的內容是關於父元素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事件之間的相互影響

執行動作:

  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中文網其他相關文章!