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

最新推荐文章于 2024-06-27 20:36:21 发布

JachinZhou

最新推荐文章于 2024-06-27 20:36:21 发布

阅读量2.7w

点赞数 5

分类专栏：组件文章标签：组件 html

本文链接：https://blog.csdn.net/qq_35129893/article/details/78594682

版权

组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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')
})