点击label事件执行两次

原创 旺爷 随笔 js 141阅读 2018-01-04 11:03:25 举报

在做项目的过程中遇到的问题:

html代码结构如

<label id ="test">
测试测试
<input type="radio">
</label>

js代码

$("#test").on("click",function(){
alert(11111)
})

结果是当点击label的时候会alert 两次 ,导致点击事件处理的过程中事件执行两遍,但是需要的效果是只执行一次;
其一:在不修改html代码结构的情况下的解决办法是将事件绑定在 input上,这样点击文字的时候照样可以触发点击事件(不修改html代码结构是因为在做表单的过程中由于使用UI框架 ,一旦代码结构改变会影响样式);
其二: 若不考虑样式问题的话,那可直接修改代码结构,样式重新修改即可;

<label id ="test" for="radioId">测试测试</label>
<input type="radio" id="radioId">

label 标签的定义
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。[color=#ff0000][/color] 见label标签

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复