看了一下别人的评论,综合了一下,我觉得,这个问题的产生不是由于事件冒泡,而是由于label标签的使用(而且我觉得楼主这段代码$(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');可以不用写呀。)。可以通过以下方式证明:
1.证明不是事件冒泡,使用 jQuery中的stopPropagation() 方法可以只阻止一个事件起泡。
js代码如下修改:
$('label').click(function(event){
//$(this).children('span').addClass('input-checked');
console.log(event.target);
var value = $(this).children('input').val();
//$(this).children('span').removeClass('input-checked');
//alert(value);
//console.log(value);
//alert(value);
//return false;
event.stopPropagation();
});
会发现输出的结果是:s01e01
不加该段代码也是这样的,因此不是事件冒泡行为。至于有的层主说用return false,它是阻止了默认的行为(在这里叫做关联行为吧哈哈,是由于label把span和input关联在一起,用return false是取消了关联行为吧)。
2.证明是由于label的关联效果。
我将楼主的代码修改为如下:
s01e02
s01e03