最近项目遇到了一个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. VUE之命令行报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法

    Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...

  2. 牛客网 Wannafly挑战赛11 B.白兔的式子-组合数阶乘逆元快速幂

    链接:https://www.nowcoder.com/acm/contest/73/B来源:牛客网 B.白兔的式子   时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K, ...

  3. OceanBase分区表有什么不同?

    概述 分区表是ORACLE从8.0开始引入的功能,也是第一个支持物理分区的数据库,随后其他数据库纷纷跟进.分区表是一种“分而治之”的思想,通过将大表.索引分成可以独立管理的.小的片段(Segment) ...

  4. JAVA中获取不重复的随机数

    我们知道 Random random = new  Random() 中可能会获取到重复的随机数 那么假设要获取1到33之间的六个不重复随机数应该怎么做呢? 首先定义一个数字数组存储1到33 int[ ...

  5. ANT---调用外部命令的一些坑

    最近用到了Ant,发现还是有许多功能是Ant没有提供相应Task支持,而操作系统提供了相应的系统命令.Ant说明书上说了,用<exec>可以调用系统命令,实际操作起来才发现陷阱可不少,一不 ...

  6. 《SQL Server 监控和诊断》

    http://jimshu.blog.51cto.com/ http://www.mssqlmct.cn/

  7. cocos2d-x 事件分发机制 ——触摸事件监听

    cocos2d-x 3.0 出来已经好久了,也已经用3.0写了几个小游戏,感觉3.0的事件触发机制太赞了,随这里总结一下.也算是对知识的一种回顾和加深理解. 3.0的事件分发机制中.须要也只须要通过创 ...

  8. POJ 1017 Packets(积累)

    [题意简述]:这个是别人的博客,有清晰的题意描写叙述.和解题思路,借助他的想法,能够非常好的解决问题! [分析]:贪心?模拟?见代码 //216K 16Ms #include<iostream& ...

  9. 查看java中的线程个数名称

    查看java中的线程个数名称 package com.stono.thread2; import java.lang.management.ManagementFactory; import java ...

  10. Ubuntu 安装 spark

    环境: Unbunt 12.04 Hadoop 2.2.x Sprak 0.9 Scala scala-2.9.0.final.tgz 步骤 1. 下载 scala 2. 解压scala,然后改动/e ...