最近项目遇到了一个bug,点击外层元素会直接触发元素内部的input框。(外层元素用的是label包裹的)。找了很久才发现是label标签造成的。

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

label最好不要包裹表单控件。

Label标签 自动触发onclick,点击内部的Input的更多相关文章

  1. JQuery模拟点击页面上的所有a标签,触发onclick事件

    注意: 这种方法需要给所有的a标签加上id属性 页面加载完成模拟点击所有的a标签: <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事 ...

  2. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  3. React中 checkbox 与 label 标签的搭配

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...

  4. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  5. 在js中拼接<a>标签,<a>标签中含有onclick事件,点击无法触发该事件

    我们在<a>标签中添加事件一般是onclick="editUser()" 这样添加,在html页面上是行的通的 但是如何你是在js中拼接<a>标签并在< ...

  6. a标签中的label在IE下触发不了a标签的href链接(label标签——解析)

    <a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...

  7. 解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

    问题描述:     在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果. 原HTML代码: <div class="col-s ...

  8. js 父子标签同时设置onclick,子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  9. label标签的显示和隐式关联问题

    按钮的html <!-- 学校 --> <div class="layui-inline"> <label class="layui-for ...

随机推荐

  1. BZOJ——2438: [中山市选2011]杀人游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=2438 Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个 ...

  2. 把Execl表格中的数据获取出来保存到数据库中

    比如我们遇到一些需要把execl表格中的数据保存到数据库中,一条一条保存效率底下而且容易出错,数据量少还好,一旦遇到数据量大的时候就会累死个人啊,下面我们就来把execl表格中数据保存到对应的数据库中 ...

  3. maven项目对于maven远程仓库没有资源的解决办法

    下载资源到本地 方法一:dependency scope 是system 类型 <dependency> <groupId>edu.ucar</groupId> & ...

  4. win10 安装git

    http://jingyan.baidu.com/article/a3a3f811d4cd308da2eb8ad1.html 双击exe安装包,在弹出的安全提示中点击“允许”.   安装向导的头两步都 ...

  5. epoll 浅析以及 nio 中的 Selector

    首先介绍下epoll的基本原理,网上有很多版本,这里选择一个个人觉得相对清晰的讲解(详情见reference): 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作 ...

  6. 算法之美--2.3.1 Z字形编排问题

    2016-12-08   00:23:11 写在前面的话:万事贵在坚持,万事开头难,有很多的东西要学,要知道主次,讲究效率,大的方向对就行!坚持........ 一.图像压缩编码中的Z字排序 JPEG ...

  7. Redis绑定多个ip地址

    Redis绑定多个ip地址 学习了:https://www.zhihu.com/question/20346112/answer/17157379 注意,用空格进行分隔 bind 127.0.0.1 ...

  8. Office HPDeskjetD2468 打印机电源灯闪烁不停,打印机不工作怎么办

    怎么处理HP DeskjetD2468 打印机电源灯闪烁不停,打印机不工作? 最佳答案 一般电源灯闪烁时因为你的打印喷头上面的盖子没有盖好,你看看.....盖好之后关机再开 谢谢!

  9. MySQL插入数据性能调优

    插入数据性能调优总结: 1.SQL插入语句调优 2.如果是InnoDB引擎的话,尝试开启事务,批量提交 3.调整MySQl数据库配置     参考: 百度空间 - MySQL插入数据性能调优 CSDN ...

  10. Windows socket I/O模型 之 select(2)

    在Windows socket I/O模型 之  select(1)中.我们仅仅是在console中简单的模拟了select的处理方法. 还有非常多特性不能改动.比方仅仅能写,不能读. 没使用线程.也 ...