最近项目遇到了一个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. Network | Public-key cryptography

    公开密钥加密public-key cryptography,也称为非对称(密钥)加密. 非对称密钥,是指一对加密密钥与解密密钥,这两个密钥是数学相关,用某用户密钥加密后所得的信息,只能用该用户的解密密 ...

  2. 我的第一个Java程序HelloWorld

    public class HelloWorld{ public static void main(String [] args){ System.out.println("HelloWorl ...

  3. vue常用指命

    1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样. 2.v-html:绑定一些包含html代码的数据在视图上. 3.v-show:用来控制元素的display属性,和显示隐藏有关.v ...

  4. Extjs grid增加或删除列后记住滚动条的位置

    IE下验证好使. { text: "Del", icon: 'Scripts/Ext/resources/images/icons/application_form_delete. ...

  5. 使用UltraISO为U盘或内存卡制作系统安装工具

    此软件可以为U盘制作Windows安装版的启动工具,也可以为Linux制作启动工具,尤其是Ubuntu这些.提示:推荐购买一些读取速度快一些的U盘,运行起来可以节省很多时间. 如果是内存卡要实现此功能 ...

  6. 【Tensorflow】tf.argmax函数

    tf.argmax(input, axis=None, name=None, dimension=None) 此函数是对矩阵按行或列计算最大值   参数 input:输入Tensor axis:0表示 ...

  7. 三维场景如何嵌入到PPT中展示？

    今天要跟大家一起交流的大体内容如标题所示,日常生活中,ppt已经成为人们工作学习生活中不可或缺的工具之一,那么三维场景是如何在ppt中加载展示的呢?请大家慢慢往下看. 1.创建命令按钮和web bro ...

  8. ItelliJ IDEA开发工具使用—创建一个web项目

    转   http://blog.csdn.net/wangyang1354/article/details/50452806 最近想用IDEA编辑器开发,但是平时都用MyEclipse和eclipse ...

  9. 如何防范SQL注入式攻击

    一.什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者 ...

  10. vue2.0 自定义 下拉刷新和上拉加载更多（Scroller） 组件

    1.下拉刷新和上拉加载更多组件 Scroller.vue <!-- 下拉刷新 上拉加载更多 组件 --> <template> <div :style="mar ...