父元素a標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在影響

sixleaves 發(fā)布于2019-08-02 11:10 / 1513人閱讀

摘要：原文地址背景開(kāi)發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫(xiě)個(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)單寫(xiě)個(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)：





    
    
    
    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)楦冈氐膐nclick并沒(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ù)器 js找父元素的兄弟 java標(biāo)簽c的元素 asp文件構(gòu)成元素的父元素

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/52817.html

相關(guān)文章

父元素a標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在影響

摘要：原文地址背景開(kāi)發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫(xiě)個(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)單寫(xiě)個(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事件存在影響

摘要：開(kāi)發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫(xiě)個(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)單寫(xiě)個(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事件存在影響

摘要：開(kāi)發(fā)過(guò)程中遇到問(wèn)題，簡(jiǎn)單寫(xiě)個(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)單寫(xiě)個(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)之間存在...

Imfan 2019-08-02 11:25 評(píng)論0 收藏0
淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則頁(yè)面優(yōu)化靜態(tài)資源壓縮...

Aomine 2019-08-23 13:51 評(píng)論0 收藏0
淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)

摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對(duì)應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁(yè)優(yōu)化的重要手段之一。為什么要減少請(qǐng)求在性能優(yōu)化中減少請(qǐng)求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網(wǎng)頁(yè)基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧針對(duì)瀏覽器網(wǎng)頁(yè)的一些優(yōu)化規(guī)則頁(yè)面優(yōu)化靜態(tài)資源壓縮...

luffyZh 2019-06-28 16:52 評(píng)論0 收藏0