jquery 判斷滑鼠移入移出位置
阿新 • • 發佈:2019-01-29
我寫的方法是網上的前輩做出來,我在這說說我自己遇到的問題。html和css程式碼就不貼了,就是4個div做測試用的。
下面是完整程式碼,基本相容各大流行瀏覽器。
function mouse(obj,str,e){ var x = e.offsetX, y = -e.offsetY; var k = Math.round(-obj.height()/obj.width()*100)/100; // 斜率 Math.round(*100)/100 var x0 = Math.round(obj.width()/2*100)/100, y0 = Math.round(-obj.height()/2*100)/100; var kx = Math.round((y-y0)/(x-x0)*100)/100; if(isFinite(kx) && kx > k && kx < -k){ flag = x-x0 > 0 ? 1 : 0; guide(flag,obj,str); } else{ flag = y-y0 > 0 ? 2 : 3; guide(flag,obj,str); } } function guide(x,obj,str){ var top = 0, left = 0; var top1 = 0, left1 = 0; if(str == '進'){ switch(x){ case 0 : top = 0; left = -200; break; case 1 : top = 0; left = 200; break; case 2 : top = -200; left = 0; break; case 3 : top = 200; left = 0; break; } top1 = 0; left1 = 0; } else{ switch(x){ case 0 : top1 = 0; left1 = -200; break; case 1 : top1 = 0; left1 = 200; break; case 2 : top1 = -200; left1 = 0; break; case 3 : top1 = 200; left1 = 0; break; } top = 0; left = 0; } // stop() 解決滑鼠運動過快,動畫在事件結束後仍持續執行的問題 switch(x){ case 0 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由左'+str); break; case 1 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由右'+str); break; case 2 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由上'+str); break; case 3 : obj.css({top:top+'px',left:left+'px'}).stop().animate({top:top1+'px',left:left1+'px'},"swing").html('滑鼠由下'+str); break; } }
<pre name="code" class="javascript"> $('.fat').on('mouseenter',function(e){
var e = window.event || e;
mouse($(this).find('.son'),'進',e);
})
$('.fat').on('mouseleave',function(e){
var e = window.event || e;
mouse($(this).find('.son'),'出',e);
})
現在來說說我遇到的問題,對於事件物件大家都知道,FF和IE的獲取方式略有不同,我們基本採用這種方式
我之前的程式碼是這樣寫得:
我將e放入mouse函式中,自以為可以獲取滑鼠物件,可是在FF下,e is not defiend;
好了,開始一步步排查錯誤:
1. 在FF下獲取事件物件,function必須有引數e,所以從表面來看function mouse()是沒有問題的,那麼會是傳參順序的問題嗎?
2. 在 js中 函式的引數沒有簽名,也沒有形參與實參一一對應的限制,函式體是通過arguments 物件來訪問引數,在個物件類似於陣列,函式會從0 -- length讀取引數
(arguments[0]是對一個引數,arguments[1]是第二個引數,以此類推),然會取相對應的引數進行操作。 所以圖中 實參兩個,形參三個,並不會有什麼問題。
3. 在 mouse 函式中執行 var e = window.event || e; 在FF中卻有e is not defiend 的報錯,但在IE,獵豹下執行並不會出錯,這就證明了js引數並不需要一一對應的關係,
也說明 e 在mouse中並沒有發揮作用。
4. 再仔細看程式碼,mouseenter 事件 其實繫結在 function(){} 上,所以 mouse 不能獲取事件物件, 所以應當更改程式碼為文章開頭的程式碼,先獲取 滑鼠物件,再當引數傳入
mouse 中,方可解決 FF 中的問題。
雖然我的問題說起來比較low ,可以說是有點可笑,但當時確實困擾我時間比較長,我把重點全放在了 事件物件的相容性問題上,並沒有想到事件繫結的作用域的問題。