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
付费偷看金额在0.1-10元之间
你把 false改成true就可以了,这有关系到时间的捕获和冒泡
代码贴出来看看,
我觉得是这样的
label
标签与input
相关联,点击label
就相当于点击了input
标签。然后流程是这样的
1.点击
label
执行本身的事件 输出label1
2.因为点击
label
就相当于点击了input
标签,所以执行input
上的事件 输出input1
3.因为
label
包含了input
,所以事件向上冒泡 执行label
事件 输出label1
。一周热门 更多>