html中label标签radio,click事件在label标签的checkbox、radio中执行2次

这是2个月前遇见的事，前一阵有人问我，便想着要记下来。以下叙述不仅针对于angularJs的ng-click事件，对普通的click事件也适用。

示例一：

js中是这么写的：

$scope.checkGoods = function(index){

$scope.items[index].isChecked = !$scope.items[index].isChecked;

}

视觉感受是click事件无效了，因为.wait_check的class没有变化，item.ischecked的值也没有变化。分布调试后，发现其实是执行了2次checkGoods()，也就是ng-click事件被执行了2次。

元素默认绑定click事件

一些元素如、、本生就默认绑定了click事件，即使你不绑定，click事件发生时他们也会接收到。

当label标签包含input时，label也自动监听原来input默认监听的事件。

事件冒泡

我们知道事件传递方式有2种：事件捕获和事件冒泡。事件会从父元素传到子元素，再从子元素传到父元素，如果事件绑定发生在父元素传到子元素的过程中，则称为事件捕获传递，如果事件绑定发生在子元素传到父元素的阶段，则称为事件冒泡传递。

由于父元素包含子元素，子元素属于父元素，所以在子元素上的操作就相当于在父元素上的操作，譬如#parent绑定了click事件，则点击子元素#child，会自然的触发原本绑在#parent上的click事件。准确的说这其实是子元素继承了父元素的事件，使子元素父元素绑定了相同的事件。