javascript - label包裹着input,给label加点击事件会响应两次
本文介绍了javascript - label包裹着input,给label加点击事件会响应两次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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
解决方案
没必要用label包含input啊，label的for属性就是为了指定label是为谁说明的
这篇关于javascript - label包裹着input,给label加点击事件会响应两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
