父元素<a>標(biāo)簽的默認(rèn)行為以及click事件之間的相互影響
發(fā)表時(shí)間：2023-09-07 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于父元素a標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在影響，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。開(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)簽...
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于父元素a標(biāo)簽的href默認(rèn)行為以及子元素綁定的click事件的響應(yīng)之間存在影響，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
開(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)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a標(biāo)簽內(nèi)部點(diǎn)擊事件失效</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: block;
width: 500px;
height: 200px;
background-color: rgb(210, 111, 30);
}
.child-one {
display: block;
width: 200px;
height: 50px;
background-color: rgb(174, 43, 226);
}
.child-two {
display: block;
width: 200px;
height: 50px;
background-color: rgb(43, 226, 67);
}
.child-three {
display: block;
width: 200px;
height: 50px;
background-color: rgb(43, 137, 226);
}
</style>
</head>
<body>
<a class="father" href="father" onclick="alert(111)">父標(biāo)簽
<span class="child-one">
子標(biāo)簽1
</span>
<object>
<a class="child-two" href="child-two">
子標(biāo)簽2
</a>
</object>
<object>
<a class="child-three" href="javascript:alert('href:child-three')">
子標(biāo)簽3
</a>
</object>
</a>
<script>
let father = document.querySelector('.father');
let ele1 = document.querySelector('.child-one');
let ele2 = document.querySelector('.child-two');
let ele3 = document.querySelector('.child-three');
ele1.addEventListener('click', function (e) {
e.stopPropagation();
// e.preventDefault();
alert('click child-one')
window.location.href = 'child-one'
}, false)
ele2.addEventListener('click', function (e) {
e.stopPropagation();
alert('click child-two')
// window.location.href='child-two'
}, false)
ele3.addEventListener('click', function (e) {
alert('click child-three')
window.location.href = 'child-three'
}, false)
father.addEventListener('click', function (e) {
alert('click father')
window.location.href = 'father'
}, false)
</script>
</body>
</html>示例如下圖(如果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è)，<a>標(biāo)簽的默認(rèn)行為是無(wú)法通過(guò)取消冒泡來(lái)阻止的，就算事件沒(méi)有冒泡到父元素，子元素在父元素<a>標(biāo)簽內(nèi)部，仍然會(huì)執(zhí)行<a>標(biāo)簽?zāi)J(rèn)行為。
解決方法：
在子元素中添加e.preventDefault()阻止默認(rèn)行為
父元素不使用<a>標(biāo)簽，使用其他標(biāo)簽綁定click事件且子元素阻止冒泡
父元素不使用href屬性，直接在<a>標(biāo)簽上綁定click事件
HTML標(biāo)簽：img標(biāo)簽的用法總結(jié)
以上就是父元素<a>標(biāo)簽的默認(rèn)行為以及click事件之間的相互影響的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
