label与input关联问题

点击事件在label标签执行2次,监听的是label和input的上层元素click事件.label和input关联（for显示关联或者input在label下隐式关联）, 点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次冒泡.

解决方式

1. 不用label关联input
2. 如果为了语义化或者用户体验必须使用label标签可以采用如下解决方式:
   a 阻止默认行为
   b 判断事件源对象的标签名为INPUT，如果为LABEL(必须大写)则返回
   c 采用时间戳

方法一 阻止默认行为

<div id="test1">
    <label>隐时关联
        <input type="radio" name="fruit" >
    </label>
</div>
<script>
test1.onclick = function (ev){
    // 方法一 阻止默认行为
    ev.preventDefault();
    console.log(this.id)
}
</script>

方法二 判断事件源对象

<div id="test2">
    <label for='xian'>显示关联</label>
    <input type="radio" name="fruit" id="xian">
</div>
<script>
test2.onclick = function (ev){
    //方法2  在关联的情况下使用 目标对象的标签名判断
    if(ev.target.tagName == 'LABEL'){
        return;
    }
    console.log(this.id);
}
</script>

方法三 采用时间戳

<div id="test3">
    <label for='xian'>显示关联</label>
    <input type="radio" name="fruit" id="xian">
</div>
<script>
var temp = 0;
test3.onclick = function(ev){
    //方法3  采用时间戳
    var now = new Date();
    if(now - temp < 100){
        console.log(this.id)
    }
    temp = now;
}
</script>

方法四 不关联label和input

<!-- 方法四  将label和input不关联  -->
<div id="test4">
    <label>不关联</label>
    <input type="radio" name="fruit" >
</div>
<script>
test4.onclick = function(ev){
    console.log(this.id)
}
</script>