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>