click事件触发了两次事件

之前遇到过click事件触发了两次alert,不明原因,近几天又想起这事,边查查,开放性问题,其实我还不是很明白。

直接上网友的例子。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<style>
.toggle {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}
.toggle label {
    /*float:left;*/
    width:4.0em;
    position: relative;
}


.toggle label span {
    text-align:center;
    padding:3px;
    display:block;
    cursor: pointer;
}

.toggle label input {
    position:absolute;
    top:-20px;
}

.toggle .input-checked /, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) / {
    background-color:#404040;
    color:#F7F7F7;
}

.toggle input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

</style>
</head>

<body>

<div class="toggle">
    <label><input type="radio" name="toggle" value="1"><span>radio1</span></label>    
</div>
<div class="toggle">
    <label><input type="radio" name="toggle" value="2"><span>radio2</span></label>
</div>
<div class="toggle">
    <label><input type="radio" name="toggle" value="3"><span>radio3</span></label>
</div>

</body>
</html>
<script>
$('label').click(function(){
    $(this).children('span').addClass('input-checked');
    var value = $(this).children('input').val();
    $(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
    console.log(value);
});
</script>

QQ截图20161104170622.png

有网友改了下js

$('label').click(function(event){
    $(this).children('span').addClass('input-checked');
    var value = $(this).children('input').val();
    $(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
    console.log(value);
    //return false
});

2222.png

event.target.type主要是这个会触发两个一个是undefined一个是radio。因为label关联的radio也被有一个关联操作。当label被点击时,默认radio也被点击了一次。
解决方法你可以

$('span').click(function () {    
    var i = $('span').index($(this));
    $(this).addClass('input-checked');
    var value = $('input').eq(i).val();
    $('span').not($(this)).removeClass('input-checked');
    console.log(value);
})

22.png

另一友人:

修改css

.toggle label input {
    position:absolute;
    top:0px;
    left: 0px;
    width:50px;
    height: 20px;
    z-index: 9999;
    opacity: 0;
}



22.png

解决问题,但我不知道为什么,你能告诉我么?

还有在js后加上return false太阳解决问题。