label包裹input,点击label,label响应两次
来源:互联网 发布:cms哪个好 编辑:程序博客网 时间:2024/06/07 16:59
一、label和input合作的两种形式
来自 W3C
The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.
在用户交互界面的时候,label元素作为一个标题说明。这个说明可以与特定的form control关联,熟知的形式有两种:①通过for属性关联;②通过将form contorl放到label标签里面;
W3C WIKI上给出了两种的例子 : https://www.w3.org/wiki/HTML/Elements/label
但是第二种在由于是label nested input,如果将事件绑在label上,会触发内层input的click事件。
二、label响应两次
可以点击示例 http://codepen.io/GitKou/pen/aZBWLr
<label for="innerIpt1"> <input id="innerIpt1" type="checkbox"/>label1</label><input id="innerIpt2" type="checkbox"/><label for="innerIpt2" id="label2">label2</label>
var label1 = document.querySelector("label");var label2 = document.querySelector("#label2");var input1 = document.querySelector("#innerIpt1");var input2 = document.querySelector("#innerIpt2");label1.addEventListener("click", function() { console.log("label1");}, false);input1.addEventListener("click", function(e) { // e.stopPropagation() console.log("input1");}, false);label2.addEventListener("click", function() { console.log("label2");}, false);input2.addEventListener("click", function(e) { e.stopPropagation() console.log("input2");}, false);
点击label1的时候,console输出:
label1 input1 lable1
点击label2的时候,console输出:
label2 input2
很好解释:
①点击label1,触发click,输出 label1;
②点击label1,用于浏览器内部关联关系会触发input的click,输出input1;
③上一个事件冒泡到label1,触发click,输出 label1;
三、另外的限制和建议
1.来自W3C
- The label element must not contain any nested label elements.
- The label element may contain at most one descendant input element, button element, select element, or textarea element.
- The for attribute of the label element must refer to a form control.
- The interactive element label must not appear as a descendant of the a element.
- The interactive element label must not appear as a descendant of the button element.
- label标签内不能再包含label。
- label标签最多只能包含一个input子孙、button、select、或textarea。
- label的for属性必须只想一个form control。
- 这个交互标签label不能作为a标签的后代。
- 这个交互标签label不能作为button标签的后代。
2.
The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
无论label是否可见,在Success Criteria 1.1.1, 1.3.1 and 4.1.2中,该项技术都是起作用的。也就是说,label被css被隐藏后,仍起作用。但是在Success Criterion 3.3.2中,label元素必须可见,因为要便于所有的用户理解这个东西的功能。
参考
- https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/
- https://www.w3.org/TR/html5/forms.html#the-label-element
- https://www.w3.org/wiki/HTML/Elements/label
- https://www.w3.org/TR/WCAG20-TECHS/H44.html
- label包裹input,点击label,label响应两次
- 解决监听label时,点击label内input执行两次的bug
- label
- Label
- label
- Label
- label
- Label
- label
- label
- label
- Label
- label
- input+label使用
- input和label标签
- 响应式设计-label
- pyqt4 label点击事件,label贴图
- 点击label时click事件被触发两次的坑
- Android常见命令
- Ext miscellany 整理
- #ubuntu# ubuntu 下安装 phpstorm
- Android应用程序 Android制作简单单页导航
- CDISC SDTM HO domain学习笔记
- label包裹input,点击label,label响应两次
- Android断点下载,多线程下载
- MYBATIS Generator
- 安卓简单开发-button的点击效果
- java反射机制
- python操作mysql数据库的常用方法使用详解
- MES服务器端配置——普实MES工具
- 使用 notepad++ 编辑器在行首、行尾添加字符
- Centos 7.2 安装 Ambari 2.2.2 + HDP 2.4.2 搭建Hadoop集群