最近项目遇到了一个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. socket的accept: Invalid argument问题

    void local_sdk_server::wait_remote_client_connect_and_comm() { /*服务器服务启动,等待客户端的链接的到来*/ //sockaddr_in ...

  2. AGC006

    AtCoder Grand Contest 006 <br > 心血来潮,开了一套AGC..... 然后发现各种不会做.........感觉智商被AGC摁在地上摩擦...... <b ...

  3. 3.eclipse中 maven打包web工程几种方式

    1.右键项目-export 选择war file导出即可 2.第二种:右键项目-RUN AS -maven build..goals填入:clean package 第三种方式:右键项目.选择Debu ...

  4. ios 6.0模拟器页面调出pop窗口消失后无法使用键盘

    ios 6模拟器上,点击事件调用出pop窗口,这个窗口新创建了window,在pop窗口消失的函数中使用了makeKeyWindow,这个是将要显示的window放到最前端.发现 屏蔽这个方法后可以了 ...

  5. 26个高效工作的小技巧 z

    1.时间常有,时间优先. 2.时间总会有的:每天只计划4-5 小时真正的工作. 3.当你在状态时,就多干点:不然就好好休息:有时候会连着几天不是工作状态,有时在工作状态时却又能天天忙活 12 小时,这 ...

  6. Weblogic内存溢出及常用参数配置

        http://www.360doc.com/content/14/0306/14/16134804_358216319.shtml 一.WebLogic内存溢出 最近访问量门户访问量突然增大, ...

  7. 了解使用Android ConstraintLayout

    说明 Google I/O 2016 上发布了 ConstraintLayout, 简直是要变革 Android 写界面方式. 于是第二天我立即找到相关文档尝试, 这是官方提供的 Codelab 项目 ...

  8. Dance In Heap(一):浅析堆的申请释放及相应保护机制

    0×00 前面的话 在内存中,堆是一个很有趣的地方,因为它可以由用户去直接的进行分配与销毁,所以也产生了一些很有趣.奇思妙想的漏洞,像unlink漏洞.House系列漏洞等等.但是在学习的过程中,我们 ...

  9. epoll 浅析以及 nio 中的 Selector

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

  10. 自己写的通过ADO操作mysql数据库

    #include <iostream> #include <windows.h> #include <atlstr.h> #import "c:\Prog ...