今天在写个demo,发现自己并没有做那个效果,他却自己产生,后来用F12调试后,发现是冒泡事件:就是一个父元素和一个子元素,子元素上的事件在自身执行完后,会在父元素上再次执行,比如:
1 $(".mst_ul li").hover(function(){ //父元素 2 $(this).addClass("bg_light"); 3 }, function(){ 4 $(this).removeClass("bg_light"); 5 } 6 ); 7 $(".nav_ul li").hover(function(){ //子元素 8 $(this).addClass("bg_light"); 9 //event.stopPropagation(); // 防止冒泡事件 10 }, function(){ 11 $(this).removeClass("bg_light"); 12 //event.stopPropagation(); 13 } 14 );
还有return false也能阻止冒泡,return false是阻止自身以及上级触发
event.stopPropagation()是自身执行,只阻止上级