首頁 > 文章 > web前端 > 父元素標籤的預設行為以及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('.father'); let ele1 = document.querySelector('.child-one'); let ele2 = document.querySelector('.child-two'); let ele3 = document.querySelector('.child-three'); ele1.addEventListener('click', function (e) { e.stopPropagation(); // e.preventDefault(); alert('click child-one') window.location.href = 'child-one' }, false) ele2.addEventListener('click', function (e) { e.stopPropagation(); alert('click child-two') // window.location.href='child-two' }, false) ele3.addEventListener('click', function (e) { alert('click child-three') window.location.href = 'child-three' }, false) father.addEventListener('click', function (e) { alert('click father') window.location.href = 'father' }, false) </script>
範例如下圖(如果a標籤嵌套,瀏覽器解析錯誤,所以用object標籤包裹了一層)。
#當點選父標籤時,先彈出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
#的跳躍。
首先可以肯定的是,事件冒泡確實被阻止了,因為父元素的onclick並沒有執行。
所以猜測,標籤的預設行為是無法透過取消冒泡來阻止的,就算事件沒有冒泡到父元素,子元素在父元素<a></a>
標籤內部,仍然會執行<a></a>
標籤預設行為。
在子元素中加入e.preventDefault()
阻止預設行為
父元素不使用<a>標籤,使用其他標籤綁定click事件且子元素阻止冒泡</a>
父元素不使用href
屬性,直接在<a></a>
標籤上綁定click事件
相關文章推薦:
#