国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

父元素a標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響

wemall / 2049人閱讀

摘要:原文地址背景開發過程中遇到問題,簡單寫個運行環境為描述一下這個問題,當標簽內部存在嵌套時,父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。

原文地址

背景

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

描述一下這個問題,當a標簽內部存在嵌套時, 父元素a標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響。頁面結構:





    
    
    
    a標簽內部點擊事件失效
    



    父標簽
        
            子標簽1
        
        
            
                子標簽2
            
        
        
            
                子標簽3
            
        
    
    



示例如下圖(如果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()阻止默認行為

父元素不使用標簽,使用其他標簽綁定click事件且子元素阻止冒泡

父元素不使用href屬性,直接在標簽上綁定click事件

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96673.html

相關文章

  • 元素a標簽href默認行為以及元素綁定click事件響應之間存在影響

    摘要:原文地址背景開發過程中遇到問題,簡單寫個運行環境為描述一下這個問題,當標簽內部存在嵌套時,父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 原文地址 背景 開發過程中遇到問題,簡單寫個demo 運行環境為Chrome 68 描述一下這個問題,當a標簽內部存在嵌套時, 父元素a標簽的href默認行為以及子元素綁定的click事件的響應之間存在影響。頁面結構: ...

    sixleaves 評論0 收藏0
  • a標簽嵌套href默認行為元素click事件存在影響

    摘要:開發過程中遇到問題,簡單寫個運行環境為描述一下這個問題,當標簽內部存在嵌套時,父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 2018-08-07 Question about work 開發過程中遇到問題,簡單寫個demo 運行環境為Chrome 68 描述一下這個問題,當標簽內部存在嵌套時, 父元素標簽的href默認行為以及子元素綁定的click事件的響應之間存在...

    DevTTL 評論0 收藏0
  • a標簽嵌套href默認行為元素click事件存在影響

    摘要:開發過程中遇到問題,簡單寫個運行環境為描述一下這個問題,當標簽內部存在嵌套時,父元素標簽的默認行為以及子元素綁定的事件的響應之間存在影響。 2018-08-07 Question about work 開發過程中遇到問題,簡單寫個demo 運行環境為Chrome 68 描述一下這個問題,當標簽內部存在嵌套時, 父元素標簽的href默認行為以及子元素綁定的click事件的響應之間存在...

    Imfan 評論0 收藏0
  • 淺談網頁基本性能優化規則小結

    摘要:雪碧圖內聯圖片將站內小圖標合并成一張圖,使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分,比如使用雪碧 這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網頁的一些優化規則 頁面優化 靜態資源壓縮...

    Aomine 評論0 收藏0
  • 淺談網頁基本性能優化規則小結

    摘要:雪碧圖內聯圖片將站內小圖標合并成一張圖,使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分,比如使用雪碧 這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網頁的一些優化規則 頁面優化 靜態資源壓縮...

    luffyZh 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<