當(dāng)鼠標(biāo)指向div，但并沒有指向li時(shí)，為什么會(huì)出現(xiàn)這種白框？

js代碼：

/**?Created?by?sofiaZ?on?17/7/22.*/
$(document).ready(function(){?????//ready事件，當(dāng)DOM加載完畢且頁面完全加載時(shí)發(fā)生。把所有jjQuery事件和函數(shù)置于該事件比較好。
????var?sub?=$('#sub');//申明一個(gè)變量指向子菜單，這是直接轉(zhuǎn)成

????var?activeRow;??????//申明一個(gè)變量，指向當(dāng)前激活的以及菜單的行
????var?activeMenu;????//二級(jí)菜單
???????????????????????//沒賦初值時(shí)為false
??var?timer;
????var?mouseInsub?=?false;???//標(biāo)識(shí)當(dāng)前鼠標(biāo)是否在子菜單里
????sub.on('mouseenter',function(e){
????????mouseInsub?=?true;
????})
????????.on('mouseleave',function(e){
????????????mouseInsub?=?false;
????????});

????var?mouseTrack?=?[];???????????????????????//創(chuàng)建一個(gè)數(shù)組，跟蹤記錄鼠標(biāo)的位置

????var?moveHandler?=?function(e){
????????mouseTrack.push({?????//push()方法向數(shù)組的末尾添加一個(gè)或多個(gè)元素，返回值為新數(shù)組的長度
????????????x:?e.pageX,
????????????y:?e.pageY??????//鼠標(biāo)指針的位置，x相對(duì)于文檔左邊緣，y相對(duì)于文檔上邊緣
????????});
????????if?(mouseTrack.length?>?3)?{
????????????mouseTrack.shift();?????//shift事件把數(shù)組的第一個(gè)元素刪除，返回第一個(gè)元素的值。這里只想要當(dāng)前以及上一次的坐標(biāo)，因此保留三個(gè)就夠了
????????}

????};

????$('#test')
????????.on('mouseenter',function(e)?{???//on事件，向元素添加事件處理程序
????????????sub.removeClass('none');???//鼠標(biāo)移動(dòng)到元素時(shí)，出現(xiàn)二級(jí)菜單
????????????$(document).bind('mousemove',?moveHandler);
????????}
????)
????????????//document對(duì)象對(duì)應(yīng)整個(gè)html文檔，$(document)是對(duì)document的jquery操作，bind為元素添加事件(mousemove常綁定在document事件上)
????????.on('mouseleave',function(e)?{???//鼠標(biāo)離開時(shí)隱藏
????????????sub.addClass('none');

????????????if?(activeRow)?{????//對(duì)于一級(jí)菜單容器，存在激活的時(shí)候，把樣式去掉
????????????????activeRow.removeClass('active');
????????????????activeRow?=?null
????????????}
????????????if?(activeMenu)?{
????????????????activeMenu.addClass('none');
????????????????activeMenu?=?null
????????????}

????????????$(document).unbind('mousemove',moveHandler);????//當(dāng)鼠標(biāo)離開菜單欄時(shí)，對(duì)mousemove事件進(jìn)行解綁，以免影響頁面其他事件
????????})
????????.on('mouseenter','li',function(e){
????????????if?(!activeRow){
????????????????activeRow?=?$(e.target);
????????????????activeRow.addClass('active');
????????????????activeMenu?=?$('#'?+?activeRow.data('id'));
????????????????activeMenu.removeClass('none');
????????????????return;
????????????}

????????????if?(timer)?{

????????????????clearTimeout(timer);
????????????}????//當(dāng)事件還沒觸發(fā)時(shí)，清掉計(jì)時(shí)器，這樣可以保證事件只觸發(fā)最后一次的？（debounce去抖技術(shù)基本原理？)

????????????var?currMousePos?=?mouseTrack[mouseTrack.length?-?1];???//當(dāng)前鼠標(biāo)坐標(biāo)
????????????var?leftCorner?=?mouseTrack[mouseTrack.length?-?2];????//上一次鼠標(biāo)坐標(biāo)

????????????var?delay?=?needDelay(sub,?leftCorner,?currMousePos);

????????????if?(delay)?{

????????????????timer?=?setTimeout(function(){?????//setTimeout返回值是一個(gè)ID？
????????????????if?(mouseInsub)?{
????????????????????return;
????????????????}

????????????????activeRow.removeClass('active');
????????????????activeMenu.addClass('none');

????????????????activeRow?=?$(e.target);
????????????????activeRow.addClass('active');
????????????????activeMenu?=?$('#'?+?activeRow.data('id'));
????????????????activeMenu.removeClass('none');??????????//大概就是，移到下一個(gè)li時(shí)，跳過if，重新獲取target與id？？
????????????????timer?=?null;???????//這樣的話，返回什么呢？？???????????????????//?因?yàn)閍ctive是全局變量？？？？

????????????},300);?????//300毫秒后執(zhí)行，這樣當(dāng)鼠標(biāo)從一級(jí)菜單轉(zhuǎn)換到二級(jí)菜單時(shí)，中間劃過其他li也不會(huì)觸動(dòng)其對(duì)應(yīng)的二級(jí)菜單，因?yàn)橛醒舆t

????????????}

????????????else?{
????????????????var?prevActiveRow?=?activeRow;
????????????????var?prevActiveMenu?=?activeMenu;

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

????????????????prevActiveRow.removeClass('active');
????????????????prevActiveMenu.addClass('none');

????????????????activeRow.addClass('active');
????????????????activeMenu.removeClass('none')


????????????}

????????????})
});

函數(shù)的js代碼：

/**
?*?Created?by?sofiaZ?on?17/7/27.
?*/
function?sameSign(a,?b)?{
????return(a?^?b)?>=0;?????//a^b為a按位異或b，若結(jié)果為正（最高位為0），則a和b要么同正要么同負(fù)）
}

function?vector(a,b){
????return{
????????x:?b.x-?a.x,
????????y:?b.y-?a.x

????}
}
function?vectorProduct(v1,v2){
????return?v1.x?*?v2.y?-?v2.x*?v1.y
}

function?isPointInTrangle(p,a,b,c)?{????//叉乘判斷
????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);????//叉乘結(jié)果

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

function?needDelay(elem,?leftCorner,?currMousePos)?{
????var?offset?=?elem.offset();???//返回被選元素相對(duì)于文檔的偏移坐標(biāo)

????var?topLeft?=?{?????//二級(jí)菜單上邊緣坐標(biāo)
????????x:?offset.left,
????????y:?offset.top
????};

????var?bottomLeft?=?{?????//二級(jí)菜單下邊緣坐標(biāo)
??????x:?offset.left,
????????y:?offset?+?elem.height()
????};

????return?isPointInTrangle(currMousePos,?leftCorner,?topLeft,?bottomLeft)