css3开关与事件

最近在一个项目中用到了css3开关，并在开关上绑定了事件，但是点击一次开关上的事件触发了两次。这个问题是因为对css3开关和对事件理解不深引起的。

首先我的css3开关是这样的结构。

<label class="iSwitch">
<span style="display:block"></span>
<input type="checkbox" style="display:block"/>
</label>

　　

$(".iSswitch").click(function(e){
    console.log(e.target)
    console.log($(this))
})

 大概的结构是这样的，css3的开关大家都懂这里不介绍了。

出现问题的地方是：在label上绑定事件。事件会执行两次，e.target分别是span和input。$(this)指向label。

原因：

1、事件默认是冒泡阶段，所以从最内层子元素触发。

2、input和label是关联的，本身就是利用这种关联性才做的css3开关。