a標(biāo)簽嵌套href默認(rèn)行為與子元素click事件存在影響

Imfan 發(fā)布于2019-08-02 11:25 / 576人閱讀

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

2018-08-07 Question about work

開(kāi)發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫個(gè)demo 運(yùn)行環(huán)境為Chrome 68

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





    
    
    
    a標(biāo)簽內(nèi)部點(diǎn)擊事件失效
    



    父標(biāo)簽
        
            子標(biāo)簽1

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

執(zhí)行操作：

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

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

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

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

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

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

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

思考：

首先可以肯定的是，事件冒泡確實(shí)被阻止了，因?yàn)楦冈氐?b>onclick并沒(méi)有執(zhí)行，所以猜測(cè)，標(biāo)簽的默認(rèn)行為是無(wú)法通過(guò)取消冒泡來(lái)阻止的，就算事件沒(méi)有冒泡到父元素，子元素在父元素標(biāo)簽內(nèi)部，仍然會(huì)執(zhí)行標(biāo)簽?zāi)J(rèn)行為。

解決方法：

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52972.html

相關(guān)文章

a標(biāo)簽嵌套href默認(rèn)行為與子元素click事件存在影響

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

DevTTL 2019-08-23 11:44 評(píng)論0 收藏0
父元素a標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在影響

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

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

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

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

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

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

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

PrototypeZ 2019-08-02 15:17 評(píng)論0 收藏0