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

2016-11-02 20:21发布

站内问答 /
5294 3 3

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

<!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>

点击label1的时候，console输出:

label1
input1
lable1

3条回答
小米哥哥2 - 这个人很懒，什么都没留下
2016-11-02 21:17

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

一周热门 更多>