w3school上面对于label标签的注释
定义和用法:
label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同。
所以label本身是有一个类似于click的事件的。因此label更多的使用场景是label和input的结合。例如:
|————————————————————–
|————————————————————–
这种结构就非常适合用label和input相结合。
当然很多时候我们这样结合,一般会绑定一些监听事件,所以这个监听事件绑定的位置很重要,很多人的直觉是绑定在label标签上,但是这是错误的,这会引起调用2次脚本
<!DOCTYPE html>
<html>
<head>
<title>label里面的input触发click事件</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<body>
<div>
<label class="click"><input type="checkbox" name=""> 是</label>
</div>
</body>
</html>
<script type="text/javascript">
$('.click').click(function(){
alert(1);
})
</script>
这个时候,我的想法就是放弃label标签的使用,(当时本人就是直接用其他标签代替了label哎)虽然抛弃了label 但是用其他标签加上事件委托,前后代码加起来多了很多,而且还需要 阻止冒泡 这种蛋疼的东西。
当时用的其他标签写的监听(不用在意里面的逻辑,算简洁吧)
function selectedOption(obj){
var judge = false;
var index = obj.attr('data-index');
console.log(index);
$('.optionM span[data-index='+index+']').each(function(){
$(this).find('input').prop('checked') && (judge = true);
});
judge === true ? $('.multiSel a:eq('+ index +')').addClass('active') : $('.multiSel a:eq('+ index +')').removeClass('active')
}
$('.optionM span').click(function(){
var selected = $(this).find('input').prop('checked');
$(this).find('input').prop('checked' , !selected);
selectedOption($(this));
})
// 阻止冒泡事件
$('input[type=checkbox]').click(function(e){
e.stopPropagation();
|———————————————————————————————————
其实正确的做法应该是把事件委托放在input标签上的话,可以省下很多功夫和逻辑
$('.optionM input').click(function(){
var judge = false;
var index = $(this).attr('data-index');
$(this).parent().parent().find('input').each(function(){
$(this).prop('checked') && (judge = true);
})
judge === true ? $('.multiSel a:eq('+ index +')').addClass('active') : $('.multiSel a:eq('+ index +')').removeClass('active')
})
就变得只需要写这么点脚本了 = =!!!
|—————————————————————–
因此这种结构对于页面开发和脚本开发非常友好<label><input type="radio" class="事件委托"></label>
把事件委托放在input上即可。