关于label标签自身点击事件触发的影响和使用方式

w3school上面对于label标签的注释

定义和用法:
label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同。

所以label本身是有一个类似于click的事件的。因此label更多的使用场景是label和input的结合。例如:

|————————————————————–
关于label标签自身点击事件触发的影响和使用方式_第1张图片
|————————————————————–

这种结构就非常适合用label和input相结合。

当然很多时候我们这样结合,一般会绑定一些监听事件,所以这个监听事件绑定的位置很重要,很多人的直觉是绑定在label标签上,但是这是错误的,这会引起调用2次脚本


<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标签自身点击事件触发的影响和使用方式_第2张图片

这个时候,我的想法就是放弃label标签的使用,(当时本人就是直接用其他标签代替了label哎)虽然抛弃了label 但是用其他标签加上事件委托,前后代码加起来多了很多,而且还需要 阻止冒泡 这种蛋疼的东西。
当时用的其他标签写的监听(不用在意里面的逻辑,算简洁吧)

关于label标签自身点击事件触发的影响和使用方式_第3张图片

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标签上的话,可以省下很多功夫和逻辑
关于label标签自身点击事件触发的影响和使用方式_第4张图片

$('.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')
})

就变得只需要写这么点脚本了 = =!!!

|—————————————————————–
因此这种结构对于页面开发和脚本开发非常友好把事件委托放在input上即可。

你可能感兴趣的:(组件)