JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活，用不好经常出现些小问题。
今天我解释一下原理：
事件类型翻译： mouseover 鼠标移上 mouseenter 鼠标移进
jQuery的 mouseover 绝对等于原生js的 onmouseover，但使用起来是往往会有些问题。
原生js没有 onmouseenter 的事件类型，jQuery内部给它封装了新的事件类型也就是 mouseenter 来解决这个问题。
( 对应还有鼠标离开 onmouseout和mouseleave同理 )
线上demo: http://jsbin.com/gihaya/1/
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>mouseover和mouseenter区别</title> <style> .over-and-enter div{background:#ccc;padding:20px;width:30%;float:left;margin: 0 10px;} .over-and-enter h2{background: #fff;} </style> <script type="text/javascript"> var x=0; var y=0; $(function(){ $('.over').mouseover(function(){ $('.over span').html( x+=1 ); }); $('.enter').mouseenter(function(){ $('.enter span').html( y+=1 ); }); }); </script> </head> <body> <div class="over-and-enter"> <p>不论鼠标<b>移上被选元素或其子元素</b>，都会触发 mouseover 事件。</p> <p>鼠标移进被选元素，不管在其内部如何移动，<b>只触发一次</b> mouseenter 事件。</p> <div class="over"> <h2>被触发的 mouseover 事件：<span></span></h2> </div> <div class="enter"> <h2>被触发的 mouseenter 事件：<span></span></h2> </div> </div> </body> </html>
工作中可能遇到的bug。
线上demo: http://jsbin.com/lacepe/1/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mouseenter和mouseleave</title> <style> .father{width:100%;height:200px;background: #ccc;border: 1px solid #000;display: none;cursor: pointer;} .children{width: 95%;height:150px;background: #eee;margin: 10px auto;cursor: pointer;} </style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ // js原生事件有onmouseover和onmouseout，功能是绝对等于jQ的mouseover和mouseout $('button').mouseover(function(){ $('.father').show(); }); // jQuery封装了2个新的事件，mouseenter和mouseleave来检测移进/出被选元素的次数 $('.father').mouseout(function(){ $('.father').hide(); }); // demo的bug把mouseout事件类型换成mouseleave即可。 // 总结： // 我们jquery 里面 不太用 mouseover mouseout // 而我们喜欢用 mouseenter mouseleave }) </script> </head> <body> <button>鼠标过来</button> <div class="father"> 我是下拉菜单,<b>离开我的范围我才隐藏起来</b>。 <div class="children">我可能是下拉菜单的内容,<b>移到我这里看看。</b></div> </div> </body> </html>
解决办法：demo的bug把mouseout事件类型换成mouseleave即可。