label包裹着input,给label加点击事件会响应两次财富值81？_问答_优艾设计网_设计界精英聚集地,Ps自学,电脑知识百科,专业设计知识分享平台

优艾设计网 https://www.uibq.com 2023-04-24 15:13 出处：网络作者：磨皮美容教程

label包裹着input,给label加点击事件会响应两次 <!doctype html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <tit优艾设计网_设计圈le>Document</title> </head&g

label包裹着input,给label加点击事件会响应两次

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <tit优艾设计网_设计圈le>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>

点击label1的时候，console输出:

label1
input1
lable1

啤酒瓶空了缓优艾设计网_设计LOGO 2022-09-10 19:06

代码贴出来看看，

360U3368259201 2022-09-10 19:07

我觉得是这样的 label 标签与 inpu优艾设计网_电脑技术t 相关联，点击 label 就相当于点击了 input 标签。然后流程是这样的 1.点击 label 执行本身的事件输出 label1 2.因为点击 label 就相当于点击了 input 标签，所以执行 input 上的事件输出 input1 3.因为 label 包含了 input，所以事件向上冒泡执行 label事件输出 label1。