label标签绑定jQuery的click事件,但click事件会触发两次
以下是我的代码，想实现点击单选项，获取得分的需求，但是点击单选项的文字，得分会被计算两次，请问我的代码出现了什么问题？谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label class="man"><input type="radio" name="sex" id="man">man</label>
<label class="woman"><input type="radio" name="sex" id="woman">woman</label>
<script src="JS/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
var score = 0;
$(".man").click(function(){
score = score + 1;
console.log(score);
// score = 0;
});
$(".woman").click(function(){
score = score + 2;
console.log(score);
// score = 0;
});
})
</script>
</body>
</html>
达令说浏览 1030回答 1
1回答
-
米琪卡哇伊
我认为原因出在事件捕获。先说解决方案：在你的代码里，为click绑定的函数添加return false:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <label class="man"><input type="radio" name="sex" id="man">man</label> <label class="woman"><input type="radio" name="sex" id="woman">woman</label> <script src="JS/jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ var score = 0; $("#man").click(function(){ score = score + 1; console.log(score); // score = 0; /*修改部分开始*/ return false; /*修改部分结束*/ }); $("#woman").click(function(){ score = score + 2; console.log(score); // score = 0; /*修改部分开始*/ return false; /*修改部分结束*/ }); }) </script></body></html>现在我们来验证一下猜测：假设是事件捕获，那么只需要在触发的时候弹出触发事件的对象即可。所以我们修改一下click绑定的函数：$("#man").click(function(event){ score = score + 1; console.log(score); // score = 0; /*修改部分开始*/ console.log(event.target) /*修改部分结束*/ });看下结果：//控制台打印的结果1<label class="man">…</label>2<input type="radio" name="sex" id="man">
随时随地看视频慕课网APP
相关分类
JavaScript