onclick事件执行2次

时间 2019-11-12

标签 onclick 事件执行繁體版

原文原文链接

代码javascript

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> </head> <body>

<p>测试label标签致使onclick触发2次</p> <p id="demo"></p>

<form> 
<ul> <li onclick="fun\_1('male')" > <label for="male">Male</label> <input type="radio" value="0" name="sex" id="male" /> </li> 		<li onclick="fun\_1('female')"> <label for="female">Female</label> <input type="radio" value="1" name="sex" id="female" /> 		</li> 
</ul>
</form>

<script src="[https://code.jquery.com/jquery-3.1.1.min.js](https://code.jquery.com/jquery-3.1.1.min.js)"></script> 
<script type="text/javascript">
function fun_1(id){
	alert($("#"+id).val());
}
</script>

</body> </html>

每次点击都会弹窗2次；html

缘由是label标签致使的，须要将onclick事件绑定或放到label包括的元素内。修改为以下
java

最终代码以下：jquery

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> </head> <body>

<p>测试label标签致使onclick触发2次</p> <p id="demo"></p>

<form> 
<ul> 
	<li > <label for="male">Male</label> <input type="radio" onclick="fun\_1('male')" value="0" name="sex" id="male" /> </li> 	  <li> <label for="female">Female</label> <input type="radio" onclick="fun\_1('female')" value="1" name="sex" id="female" /> 	 </li>
</ul>
</form>
<script src="[https://code.jquery.com/jquery-3.1.1.min.js](https://code.jquery.com/jquery-3.1.1.min.js)"></script> 
<script type="text/javascript">
	function fun_1(id){
		alert($("#"+id).val());
	}
</script>

</body>
</html>