label包裹著input,給label加點(diǎn)擊事件會(huì)響應(yīng)兩次 財(cái)富值81

科技 未結(jié) 3 447
q1509668458
q1509668458 2022-09-10 18:47

label包裹著input,給label加點(diǎn)擊事件會(huì)響應(yīng)兩次

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <label for="innerIpt1"><input id="innerIpt1" type="checkbox"/>label1 </label><input id="innerIpt2" type="checkbox"/> <label for="innerIpt2" id="label2">label2 </label> <script>var label1 = document.querySelector("label"); var label2 = document.querySelector("#label2"); var input1 = document.querySelector("#innerIpt1"); var input2 = document.querySelector("#innerIpt2");label1.addEventListener("click", function() { console.log("label1"); }, false); input1.addEventListener("click", function(e) { // e.stopPropagation() console.log("input1"); }, false);label2.addEventListener("click", function() { console.log("label2"); }, false);input2.addEventListener("click", function(e) { e.stopPropagation() console.log("input2"); }, false); </script> </body> </html>

點(diǎn)擊label1的時(shí)候，console輸出:

label1
input1
lable1

3條回答
  • 360U3368259201
    2022-09-10 19:07

    我覺(jué)得是這樣的 label 標(biāo)簽與 input 相關(guān)聯(lián)，點(diǎn)擊 label 就相當(dāng)于點(diǎn)擊了 input 標(biāo)簽。然后流程是這樣的 1.點(diǎn)擊 label 執(zhí)行本身的事件 輸出 label1 2.因?yàn)辄c(diǎn)擊 label 就相當(dāng)于點(diǎn)擊了 input 標(biāo)簽，所以執(zhí)行 input 上的事件 輸出 input1 3.因?yàn)?label 包含了 input，所以事件向上冒泡 執(zhí)行 label事件 輸出 label1。

提交回復(fù)