html_label标签

label标签

作用

• label标签的主要作用是可以提升用户的体验度，常与表单控件连用；
• label标签与特定的表单控件关联后，当用户点击label标签时，就会触发特定的表单控件！

label标签与表单控件的关联方式

1.显示关联

• 通过 label标签的for属性 和 表单控件的id属性 显示关联；

  • 此时 for属性与id属性的属性值必须相同；

• 举例说明

  • <label for="name">名称：</label>
    <input type="text" id='name' placeholder="请输入产品名称">
    

  • 当点击文本“名称：”时，会自动聚焦在input输入框中；

2.隐士关联

• 隐士关联是直接使用label标签包裹表单控件；

  • 注1：label标签只能包含一个表单元素，包含多个只对第一个有效；
  • 注2：此时label不能添加for属性，否则不做作用了！

• 举例说明

  • 性别：
    <label ><input type='radio'/>  男</label>
    <label ><input type='radio'/>  女</label>
    

  • 此时点击 男/女 就会选中其前面的单选框；

  • 性别：
    <label for="name"><input type='radio'/> 男</label>
    <label for="name"><input type='radio'/> 女</label>
    

  • 此时只有点击 单选框才能选中，点击文本不起作用

label标签触发click事件(两次)

 <div class="convert-box" @click='test'>
      <label for="name">名称：</label>
      <input type="text" id='name' placeholder="请输入产品名称">
 </div>

 test(){
      console.log('执行了')
 }

最近发现一个比较有意思的现象

• 如上代码：label标签与表单控件相关联，父组件绑定点击事件；

• 现象

  • [1]当点击文本 “名称：”时，会触发两次test方法；
  • [2]当点击input输入框时，会触发一次test方法；

• 原因

  • 当点击label标签时
    • (1)通过冒泡触发父组件test方法；
    • (2)label与input绑定，相当于点击了input，又由input触发了父组件的test方法；

• 解决1

  • 阻止元素的默认事件；

  •  <div class="convert-box" @click.prevent='test($event)'>
          <label for="name">名称：</label>
          <input type="text" id='name' placeholder="请输入产品名称">
     </div>
    

  • 通过prevent修饰符阻止了label标签的默认事件·；

    • 此时，点击label标签仅通过冒泡 触发1次test方法；
    • 但是 点击label标签也不会聚焦input标签了 ，违背了初衷；

• 解决2

  • 通过target来辨认；

  • <div class="convert-box" @click='test'>
          <label for="name">名称：</label>
          <input type="text" id='name' placeholder="请输入产品名称">
     </div>
    

  •   test(e){
          if(e.target.tagName == 'DIV'){
            // 仅在点击div时执行，点击input与label时不执行
            console.log('执行了', e.target)
          }
        }