最近项目遇到了一个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. Careercup | Chapter 2

    链表的题里面,快慢指针.双指针用得很多. 2.1 Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow w ...

  2. Linux下安装python3.3.2及configrue、make、make install

    一.安装python3.3.2 raspberry的/usr/local/src目录没有权限,可执行如下命令 pi@raspberrypi:~$ sudo chmod -R 777 /usr/loca ...

  3. ARC下循环引用的问题

    最初 最近在开发应用时碰到使用ASIHttpRequest后在某些机器上发不出请求的问题,项目开启了ARC,代码是这样写的: @implement MainController - (void) fe ...

  4. 获取path的几种方式:NSFileManager NSHomeDirectory NSBundle

    //---------------------------------------------------------------------------------NSFileManager *fi ...

  5. 【bootstrap】bootstrap中的tooltip的使用

    先看看效果图:[当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息] 这样的效果,怎么实现呢? 很简单 1.引入jQuery.js和bootstrap的js和css 2.给想要有t ...

  6. valid-palindrome——判断带符号数字字母的字符串是否为回文

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  7. Mysql导出大量数据

    outfile 导出文件   select name from t1 into outfile "/tmp/test.txt"   infile 导入文件 导入到表t1中的name ...

  8. linux find prune排除某目录或文件

    http://blog.csdn.net/ysdaniel/article/details/7995681 查找cache目录下不是html的文件 find ./cache ! -name '*.ht ...

  9. Linux CenOS Python3 和 python2 共存

    1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...

  10. yum安装nginx+PHP+Mysql

    #mkdir /var/www/yum_repo 1.nginx安装: 在http://nginx.org/en/linux_packages.html#stable中下载CentOSX对应版本的rp ...