问题代码如下:
<label>
<button type="button" id="a" name="a" οnclick="alert(1)">11111111111111</button>
<button type="button" id="b" name="b" οnclick="alert(2)">22222222222222</button>
<button type="button" id="c" name="c" οnclick="alert(3)">33333333333333</button>
</label>
如果label没写for属性的话,在ie下能正常执行,点击哪个按钮就弹出对应的弹出框。
但是问题出来火狐跟谷歌浏览器上。
如果不定义label的for属性的话,默认绑定第一个button,貌似是就近原则。
执行后,点击第三个按钮,会先弹出alert(3)再弹出alert(1),ie则正确弹出alert(3)。
解决:
如果必须外层用到label标签,但又不想指定某个id控件的话。
就写一个html控件没有的id,随便什么都行,只要不跟控件id重名就成。(我这里用的是'noid',即button控件没用到的id名。)
如下:
<label for="noid">
<button type="button" id="a" name="a" οnclick="alert(1)">11111111111111</button>
<button type="button" id="b" name="b" οnclick="alert(2)">22222222222222</button>
<button type="button" id="c" name="c" οnclick="alert(3)">33333333333333</button>
</label>
最后附上label标签的说明及使用:
HTML <label> 标签
定义和用法
<label> 标签为 input 元素定义标注(标记)。
< label> 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。