在label中包裹input,同时给label添加点击事件,会发现事件执行两次

问题:在label中包裹input,同时给label添加点击事件,会发现事件执行两次;
原因:input的时间冒泡

解决方法:

html

	check1

方法一：将事件绑定到input标签上,去掉label标签上的事件绑定;

$("#che").on("click",function(event){
	console.log(1)
});

方法二：给input标签阻止事件冒泡,同时将事件绑定到label标签上

$("#lab").on("click",function(){
	console.log(1)
});
$("#che").on("click",function(event){
	event.stopPropagation();//阻止其继续冒泡
});

方法三：给label加一个for也可（label的for和input的id名对应即可，此时label和input为评级）

请点击文本标记之一，就可以触发相关控件：


Male



Female