label下多个button的触发问题

问题代码如下:

    <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 属性相同。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值