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

2016-11-02 20:21发布

站内问答 /
5384 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条回答
goudan - 沵的声息是珴不需要分辩的频率
1楼 · 2016-11-02 21:10.采纳回答

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

53人赞 添加讨论(1) 举报
小硕的 - 这个人很懒，什么都没留下
2楼-- · 2016-11-02 21:03

代码贴出来看看，

69人赞 添加讨论(0)举报
小米哥哥2 - 这个人很懒，什么都没留下
3楼-- · 2016-11-02 21:17

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

28人赞 添加讨论(0)举报

一周热门 更多>