label包裹着input,给label加点击事件会响应两次
7
739<!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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
没必要用label包含input啊，label的for属性就是为了指定label是为谁说明的
今天也碰到这个问题了，联想到label与其绑定元素的关系，就猜测当点击label时，浏览器会自动给被绑定元素也执行点击事件的行为，试了下用e.preventDefault()，发现果然阻止了这个默认行为。事件也就只被执行一次了
代码贴出来看看，
我觉得是这样的
label标签与input相关联，点击label就相当于点击了input标签。然后流程是这样的
1.点击
label执行本身的事件 输出label12.因为点击
label就相当于点击了input标签，所以执行input上的事件 输出input13.因为
label包含了input，所以事件向上冒泡 执行label事件 输出label1。你把 false改成true就可以了，这有关系到时间的捕获和冒泡
为什么要用label包裹input？个人感觉画蛇添足了
貌似不单单是label,p也是会的