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

9621924

发布于
2016-11-02

更新于
2016-11-02

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

jquery javascript

阅读 6.4k

7 个回答

得票最新

StinsonZhao

3.5k22131

发布于
2016-11-02

✓ 已被采纳

没必要用label包含input啊，label的for属性就是为了指定label是为谁说明的

咔吱

121

发布于
2016-11-03

今天也碰到这个问题了，联想到label与其绑定元素的关系，就猜测当点击label时，浏览器会自动给被绑定元素也执行点击事件的行为，试了下用e.preventDefault()，发现果然阻止了这个默认行为。事件也就只被执行一次了

linong

29.2k1266133

发布于
2016-11-02

代码贴出来看看，

emperor_han

3131829

发布于
2016-11-02

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