自己遇到的冒泡事件

今天在写个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()是自身执行,只阻止上级

原文地址:https://www.cnblogs.com/samtrybest/p/5078426.html