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

3条回答
goudan - 沵的声息是珴不需要分辩的频率
1楼 · 2016-11-02 21:10.采纳回答

你把 false改成true就可以了,这有关系到时间的捕获和冒泡

代码贴出来看看,

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

一周热门 更多>