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

2016-11-02 20:21发布

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