如果鼠標(biāo)移出菜單欄，然后再進(jìn)去時(shí)，顯示就會(huì)不正確了，是不是因?yàn)関ar leftCorner=mouseTrack[mouseTrack.length-2];計(jì)算會(huì)出錯(cuò)。

代碼如下：

<script?src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
??//二進(jìn)制的正負(fù)表示是在最高位，1表示負(fù)，0表示正，抑或運(yùn)算是僅當(dāng)對(duì)應(yīng)的2位有一位為1時(shí)才返回1,反過(guò)來(lái)如果抑或運(yùn)算返回的結(jié)果是0（正），則一定是2個(gè)1，或者2個(gè)0.反之，則是一個(gè)0，一個(gè)1
??function?sameSign(a,b){
????return?(a^b)>=0;
??}
??//向量的定義
??function?vector(a,b){
????return?{
??????x:b.x-a.x,//終點(diǎn)的坐標(biāo)減去起點(diǎn)的坐標(biāo)
??????y:b.y-a.y
????}
??}
??//向量叉乘公式
??function?vectorProduct(v1,v2){
????return?v1.x*v2.y-v2.x*v1.y
??}
??//叉乘判斷方法
??function?isPointInTrangle(p,a,b,c){//p：鼠標(biāo)當(dāng)前點(diǎn)的坐標(biāo)，a:鼠標(biāo)上一次的坐標(biāo)，b,c：二級(jí)菜單上下邊緣坐標(biāo)
????var?pa=vector(p,a);
????var?pb=vector(p,b);
????var?pc=vector(p,c);

????var?t1=vectorProduct(pa,pb);
????var?t2=vectorProduct(pb,pc);
????var?t3=vectorProduct(pc,pa);

????return?sameSign(t1,t2)&&sameSign(t2,t3);
??}

??function?needDelay(elem,leftCorner,currMousePos){//用offset方法獲取上下邊緣
????var?offset=elem.offset();

????var?topLeft={
??????x:offset.left,
??????y:offset.top
????};

????var?bottomLeft={
??????x:offset.left,
??????y:offset.top+elem.height()
????};
????return?isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft)
??}
</script>
<script>
??$(function(){
????var?sub=$('#sub');
????var?activeRow;//選中的行
????var?activeMenu;//選中的行對(duì)應(yīng)的二級(jí)菜單
????var?timer;//setTimeout返回的計(jì)時(shí)器id
????var?mouseInSub=false;//當(dāng)前鼠標(biāo)是否在子菜單里
????sub.on('mouseenter',function(e){
??????mouseInSub=true;
????}).on('mouseleave',function(e){
??????mouseInSub=false;
????});

????//創(chuàng)建數(shù)組，記錄
????var?mouseTrack=[];//數(shù)組跟蹤記錄鼠標(biāo)的位置
????var?moveHandler=function(e){//鼠標(biāo)離開(kāi)菜單時(shí)，需要對(duì)綁定在document上的mousemove事件解綁,以免影響頁(yè)面中其他組件，所以將事件監(jiān)聽(tīng)函數(shù)獨(dú)立出來(lái)，方便后續(xù)解綁操作
??????mouseTrack.push({
????????x:e.pageX,
????????y:e.pageY
??????});
??????if(mouseTrack.length>3){
????????mouseTrack.shift();
??????}
????};
????$('#test')
??????.on('mouseenter',function(e){
????????//sub.removeClass('none');

????????$(document).bind('mousemove',moveHandler);//mousemove事件一般綁定在document上
??????})
??????.on('mouseleave',function(e){
????????sub.addClass('none');//鼠標(biāo)移動(dòng)到一級(jí)菜單時(shí)，二級(jí)菜單隱藏

????????if(activeRow){//鼠標(biāo)離開(kāi)一級(jí)菜單，如果存在激活的行，樣式要去掉，并把變量置空
??????????activeRow.removeClass('active');
??????????activeRow=null;
????????}
????????if(activeMenu){
??????????activeMenu.addClass('none');
??????????activeMenu=null;
????????}

????????$(document).unbind('mouseove',moveHandler);
??????})
??????.on('mouseenter','li',function(e){//一級(jí)菜單的列表項(xiàng)綁定事件
????????sub.removeClass('none');//鼠標(biāo)移動(dòng)到一級(jí)菜單時(shí)，二級(jí)菜單顯示
????????if(!activeRow){//移過(guò)去沒(méi)有激活的一級(jí)菜單
??????????activeRow=$(e.target);
??????????activeRow.addClass('active');

??????????activeMenu=$('#'+activeRow.data('id'));
??????????activeMenu.removeClass('none');
??????????return;
????????}
????????//debounce:mouseenter頻繁觸發(fā)時(shí)，只執(zhí)行最后一次
????????if(timer){
??????????clearTimeout(timer);
????????}
????????console.log(mouseTrack)
????????var?currMousePos=mouseTrack[mouseTrack.length-1];
????????var?leftCorner=mouseTrack[mouseTrack.length-2];
????????var?delay=needDelay(sub,leftCorner,currMousePos);//是否需要延遲
????????if(delay){//如果在三角形內(nèi)，需要延遲
??????????timer=setTimeout(function(){
????????????if(mouseInSub){
??????????????return;
????????????}
????????????activeRow.removeClass('active');
????????????activeMenu.addClass('none');

????????????activeRow=$(e.target);
????????????activeRow.addClass('active');
????????????activeMenu=$('#'+activeRow.data('id'));
????????????activeMenu.removeClass('none');
????????????timer=null;//事件觸發(fā)時(shí)，如果計(jì)時(shí)器并沒(méi)有執(zhí)行，就把它清掉，這樣能保證事件觸發(fā)停止時(shí)，會(huì)執(zhí)行最后一次，而其他的都會(huì)被忽略
??????????},300);
????????}else{
??????????var?prevActiveRow=activeRow;
??????????var?prevActiveMenu=activeMenu;

??????????activeRow=$(e.target);
??????????activeMenu=$('#'+activeRow.data('id'));

??????????prevActiveRow.removeClass('active');
??????????prevActiveMenu.addClass('none');//上一次二級(jí)菜單隱藏
??????????activeRow.addClass('active');
??????????activeMenu.removeClass('none');//上一次二級(jí)菜單顯示
????????}
??????});

??});
</script>