看了一下别人的评论,综合了一下,我觉得,这个问题的产生不是由于事件冒泡,而是由于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的关联效果。

我将楼主的代码修改为如下:

s01e01

s01e02

s01e03

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐