html_label标签

如上代码：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)}}

html_label标签相关推荐

Go 知识点（18）— 条件编译（编译标签、文件后缀）
1. 条件编译 Go 能根据所处环境选择对应的源码进行编译.让编译器只对满足条件的代码进行编译,将不满足条件的代码舍弃,这就叫做条件编译. 在 Go 中,也称之为 Build Constraints ...
Git 常用操作（2）- 创建标签
1. 列出标签在 Git 中列出已有的标签是非常简单直观的.只需要输入 git tag: $ git tag v0.1 v1.3 2. 创建标签 Git 使用两种主要类型的标签:轻量标签(light ...
Docker 入门系列（2）- Docker 镜像, 免 sudo 使用 docker 命令、获取查看、修改镜像标签、查找删除创建镜像、导入导出镜像
1. 免 sudo 使用 docker 命令如果还没有 docker group 就添加一个 sudo groupadd docker 将用户加入该 group 内 sudo gpasswd -a ...
JSTL标签库学习笔记
JSTL概述 apache的东西,依赖于EL 使用jstl需要导入jstl.jar包标签库 core 核心标签库 fmt 格式化标签库 sql 数据库标签库,过时 xml xml标签库,过时 JST ...
jquery过滤HTML标签方法
//过滤HTML标签 function removeHTMLTag(str) {str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tags ...
BCELoss BCEWithLogitsLoss 多标签损失函数
BCELoss 在图片多标签分类时,如果3张图片分3类,会输出一个3*3的矩阵. 先用Sigmoid给这些值都搞到0~1之间: 假设Target是: emmm应该是我上面每次都保留4位小数,算到最后误 ...
xgboost lightgbm catboost 多分类多标签
xgboost 与 lightgbm 官方均支持多分类任务,但不直接支持多标签分类任务,实现多标签任务的方法之一是结合sklearn 提供的 multiclass 子类,如OneVsRestClass ...
G6实现标签拖动连线画流程图
需求描述列出所有的task标签,拖动task标签在一旁画流程图,打包task的任务名及id和任务的执行流程以json的格式发给后端. 技术栈 G6,vue,h5自带的draggable实现拖动.也稍 ...
语义分割改进：通过视频传播和标签松弛
语义分割改进:通过视频传播和标签松弛 Improving Semantic Segmentation via Video Propagation and Label Relaxation 论文地址:h ...

html_label标签

目录

label标签

作用

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

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

html_label标签相关推荐

最新文章

热门文章