JS Onclick事件重复执行竟然是因为label

最近在做一个政企满意度调查问卷类的项目 问卷中的单选、多选框要求用美化的图标图片取代默认单选复选框 所以我又用原生JS封装了一个小功能。。。是的 又是原生JS 。
这个功能具备点击渲染图标 改变input的checked属性值 并能够把已选选项的ID存取到隐藏变量内 先看一下HTML结构和CSS样式：

    

        
            
            
        
        AAAAAAAA
    
    
    

    
    

        
            
            
        
        000000000
    
    

当然结构不一定要这样写 也可以把label包住input 。。。接下来就是给大父级DIV添加点击事件 在这里我把单选和复选用一个标识参数区分开并融合到一个函数里 并且因为我们后台要求的数据格式是“,ID1,ID2,ID3,ID4,...,"所以在这里存储的时候做了一下字符串处理 请看函数

在这里要解释一下，虽然组织在一个方法里面里，但是单选和复选的逻辑不太一样。单选的思路是当点击某一个的时候，给每一组DIV先换成false图片，在另外单独给当前这个DIV换上true的图片。而多选的逻辑是点击时如果当前这个DIV的input是false，则变为true,并换上true的图片，否则则变为false并换上false的图片。另外还有一些开存第一个和删除最后一个后的简单处理，不在赘述。

功能介绍完毕，接下来就开始填坑了，我发现多选的时候,点击某一个后总是会重复执行click事件，导致存储的数据每一个都会存两遍。但是如果把事件名换成了onmouseup,那么事件只会执行一次，数据也不会重复存储了。但是。。。测试的过程中发现onmouseup事件没有onclick事件灵敏，onmouseup事件点击取消选择时需要多次点击才会触发，用户体验很差，这样肯定过不了。查了很多帖子，有的说onclick事件包括onmousedown和onmouseup组合事件，所以会出发两次，但是拿一个很简单的例子click试一下也不会执行两遍，我都开始怀疑三观了。。。结果在我准备静下心来重新写一遍这个功能的时候，我不小心忘记了给label用for绑定input的ID，所以，就很乌龙了。。。然后才查到了问题的核心，“原因应该就是label与input绑定了的缘故，点击label等效于点击input。点击label，冒泡触发一次父元素的click，然后label默认又会触发绑定input的click事件，又一次触发父元素的事件。”

当然，解决label的问题的正经方法肯定是像我一样忘记写for，查到了几种解决方法的思路：
一、最简单粗暴的方法就是阻止input的点击事件：

二、转换布局思路，让input覆盖在label标签上,使点中对象只能是input标签

三、在label>input结构下，为了避免重复点击事件，将点击事件直接加到input中即可。对应的CSS：
label{cursor: pointer;background-color: #f00;}
label input{margin-right: -13px;width:13px;height: 13px;opacity: 0;filter: alpha(opacity=0);}
input标签的css规则，是为了保证不隐藏input的情况下，又能使input不占位，并且在页面上透明显示，从而保证ie7/8也能像chrome一样能正常响应input的点击事件！ie7下默认的input宽高是20px,标准浏览器是13px,因要兼容处理，margin-right才能统一写-13px。

反反复复终于解决了这个小Bug,虽然是一个小功能，但是我发现在用原生JS开发可以接触最底层的逻辑和算法，每一个细小的功能，都是自己组织起来的，遇到问题时，应该是第一时间找出解决办法，但是对于一名有着高远追求的程序员，最欣慰的不是找到一段能够解决bug的方法，而是自己能够有时间静下来去钻研摸索其中的问题核心所在，依然痛并快乐着。