資訊專欄INFORMATION COLUMN
摘要：開發過程中遇到問題，簡單寫個運行環境為描述一下這個問題，當標簽內部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。
2018-08-07 Question about work
開發過程中遇到問題，簡單寫個demo 運行環境為Chrome 68
描述一下這個問題，當標簽內部存在嵌套時， 父元素標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響。頁面結構：
a標簽內部點擊事件失效
父標簽
子標簽1
示例如下圖(如果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并沒有執行，所以猜測，標簽的默認行為是無法通過取消冒泡來阻止的，就算事件沒有冒泡到父元素，子元素在父元素標簽內部，仍然會執行標簽默認行為。
解決方法：
在子元素中添加e.preventDefault()阻止默認行為
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97386.html
摘要：開發過程中遇到問題，簡單寫個運行環境為描述一下這個問題，當標簽內部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 2018-08-07 Question about work 開發過程中遇到問題，簡單寫個demo 運行環境為Chrome 68 描述一下這個問題，當標簽內部存在嵌套時， 父元素標簽的href默認行為以及子元素綁定的click事件的響應之間存在...
摘要：原文地址背景開發過程中遇到問題，簡單寫個運行環境為描述一下這個問題，當標簽內部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 原文地址 背景 開發過程中遇到問題，簡單寫個demo 運行環境為Chrome 68 描述一下這個問題，當a標簽內部存在嵌套時， 父元素a標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響。頁面結構： ...
摘要：原文地址背景開發過程中遇到問題，簡單寫個運行環境為描述一下這個問題，當標簽內部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 原文地址 背景 開發過程中遇到問題，簡單寫個demo 運行環境為Chrome 68 描述一下這個問題，當a標簽內部存在嵌套時， 父元素a標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響。頁面結構： ...
摘要：文檔類型，它位于文檔中最前面的位置，處于標簽之前。如果你想制作符合標準的頁面，一個必不可少的關鍵組成部分就是的聲明。類似的，如果文檔包含的是標記，但是聲明指定是也是不恰當的。如何觸發兩種模式不存在或形式不正確會導致和文檔以混雜模式呈現。 1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。 1、包含與被包含 A.contains(B)檢測B節點是否是A節點的子...
閱讀 2106·2021-11-18 10:02
閱讀 2859·2021-09-04 16:41
閱讀 1148·2019-08-30 15:55
閱讀 1414·2019-08-29 17:27
閱讀 1085·2019-08-29 17:12
閱讀 2538·2019-08-29 15:38
閱讀 2861·2019-08-29 13:02
閱讀 2836·2019-08-29 12:29
