a標簽嵌套href默認行為與子元素click事件存在影響

DevTTL 發(fā)布于2019-08-23 11:44 / 1543人閱讀

摘要：開發(fā)過程中遇到問題，簡單寫個運行環(huán)境為描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應(yīng)之間存在影響。

2018-08-07 Question about work

開發(fā)過程中遇到問題，簡單寫個demo 運行環(huán)境為Chrome 68

描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在影響。頁面結(jié)構(gòu)：





    
    
    
    a標簽內(nèi)部點擊事件失效
    



    父標簽
        
            子標簽1

示例如下圖(如果a標簽嵌套，瀏覽器解析錯誤，所以用object標簽包裹了一層)。

執(zhí)行操作：

當(dāng)點擊父標簽時，先彈出111，然后跳轉(zhuǎn)父標簽的href鏈接。

說明onclick執(zhí)行先于href

當(dāng)點擊child-one時，執(zhí)行元素綁定的click事件，會彈出alert，但是location仍然跳轉(zhuǎn)到了father。

阻止冒泡后，執(zhí)行結(jié)果仍然不符合預(yù)期。添加preventDefault之后，執(zhí)行了子元素自己的跳轉(zhuǎn)。

當(dāng)點擊child-two時，彈出響應(yīng)信息，然后會跳轉(zhuǎn)href的鏈接。

當(dāng)點擊child-three時，先彈出click child-three，然后是href child-three，說明click事件先于href執(zhí)行。

上面4個操作除了2之外都很好理解，2中，為什么已經(jīng)在阻止了事件冒泡之后，仍然執(zhí)行了父元素中href的跳轉(zhuǎn)。

思考：

首先可以肯定的是，事件冒泡確實被阻止了，因為父元素的onclick并沒有執(zhí)行，所以猜測，標簽的默認行為是無法通過取消冒泡來阻止的，就算事件沒有冒泡到父元素，子元素在父元素標簽內(nèi)部，仍然會執(zhí)行標簽?zāi)J行為。

解決方法：

在子元素中添加e.preventDefault()阻止默認行為

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

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

云服務(wù)器 GPU云服務(wù)器 a標簽href跳轉(zhuǎn) js觸發(fā)click事件 js往標簽href放數(shù)據(jù) 元素存在

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97386.html

相關(guān)文章

a標簽嵌套href默認行為與子元素click事件存在影響

摘要：開發(fā)過程中遇到問題，簡單寫個運行環(huán)境為描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應(yīng)之間存在影響。 2018-08-07 Question about work 開發(fā)過程中遇到問題，簡單寫個demo 運行環(huán)境為Chrome 68 描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在...

Imfan 2019-08-02 11:25 評論0 收藏0
父元素a標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在影響

摘要：原文地址背景開發(fā)過程中遇到問題，簡單寫個運行環(huán)境為描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應(yīng)之間存在影響。原文地址背景開發(fā)過程中遇到問題，簡單寫個demo 運行環(huán)境為Chrome 68 描述一下這個問題，當(dāng)a標簽內(nèi)部存在嵌套時，父元素a標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在影響。頁面結(jié)構(gòu)： ...

wemall 2019-08-23 10:46 評論0 收藏0
父元素a標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在影響

摘要：原文地址背景開發(fā)過程中遇到問題，簡單寫個運行環(huán)境為描述一下這個問題，當(dāng)標簽內(nèi)部存在嵌套時，父元素標簽的默認行為以及子元素綁定的事件的響應(yīng)之間存在影響。原文地址背景開發(fā)過程中遇到問題，簡單寫個demo 運行環(huán)境為Chrome 68 描述一下這個問題，當(dāng)a標簽內(nèi)部存在嵌套時，父元素a標簽的href默認行為以及子元素綁定的click事件的響應(yīng)之間存在影響。頁面結(jié)構(gòu)： ...

sixleaves 2019-08-02 11:10 評論0 收藏0
前端必備基礎(chǔ)

摘要：文檔類型，它位于文檔中最前面的位置，處于標簽之前。如果你想制作符合標準的頁面，一個必不可少的關(guān)鍵組成部分就是的聲明。類似的，如果文檔包含的是標記，但是聲明指定是也是不恰當(dāng)?shù)摹Ｈ绾斡|發(fā)兩種模式不存在或形式不正確會導(dǎo)致和文檔以混雜模式呈現(xiàn)。 1、DOM結(jié)構(gòu) —— 兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。 1、包含與被包含 A.contains(B)檢測B節(jié)點是否是A節(jié)點的子...

jkyin 2019-08-30 11:09 評論0 收藏0
前端必備基礎(chǔ)

摘要：文檔類型，它位于文檔中最前面的位置，處于標簽之前。如果你想制作符合標準的頁面，一個必不可少的關(guān)鍵組成部分就是的聲明。類似的，如果文檔包含的是標記，但是聲明指定是也是不恰當(dāng)?shù)摹Ｈ绾斡|發(fā)兩種模式不存在或形式不正確會導(dǎo)致和文檔以混雜模式呈現(xiàn)。 1、DOM結(jié)構(gòu) —— 兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。 1、包含與被包含 A.contains(B)檢測B節(jié)點是否是A節(jié)點的子...

PrototypeZ 2019-08-02 15:17 評論0 收藏0