JavaScript和JQuery的鼠标mouse事件冒泡处理
简单的鼠标移动事件：
进入
mouseenter：不冒泡 mouseover:冒泡
不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件
只有在鼠标指针穿过被选元素时，才会触发mouseenter事件
移出
mouseleave:不冒泡 mouseout：冒泡
不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件
只有在鼠标指针离开被选元素时，才会触发mouseleave事件
我们通过一个案例观察下问题：
给一个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不一样
<!DOCTYPEhtml><divclass="outoverout"style="width:40%;height:120px;margin:015px;background-color:#D6EDFC;float:left;"data-mce-style="width:40%;height:120px;margin:015px;background-color:#d6edfc;float:left;"><pstyle="border:1pxsolidred"data-mce-style="border:1pxsolidred;">外部子元素</p><divclass="inoverout"style="width:60%;background-color:#FFCC00;margin:10pxauto;"data-mce-style="width:60%;background-color:#ffcc00;margin:10pxauto;"><pstyle="border:1pxsolidred"data-mce-style="border:1pxsolidred;">内部子元素</p><pid="inshow">0</p> </div><pid="outshow">0</p> </div><scripttype="text/javascript">
vari=0; vark=0;
document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){ document.querySelectorAll("#inshow")[0].textContent=(++i) e.stopPropagation(); },false)
document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){ document.querySelectorAll("#outshow")[0].textContent=(++k) },false)
</script>
热门推荐
10 送灯祝福语简短独特
11 订婚新发言简短祝福语
12 离职横幅升职祝福语简短
13 邻家生小孩祝福语简短
14 38节贺卡简短祝福语
15 六十岁大寿祝福语简短
16 下雨开工吉祥祝福语简短
17 教练生日祝福语 简短独特
18 恭贺新婚文案祝福语简短