label包裹着input,给label加点击事件会响应两次
<!doctype html>
<html>
<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
哔哔one
相关分类