偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題。首先想到的是給容器的四個邊添加幾個塊，然后看鼠標進入的時候哪個塊先監聽到鼠標事件。不過這樣麻煩太多了。google了一下找到了一個不錯的解決方法，是基於jquery的，原文地址
說實話，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;這句用到的數學知識我是真沒有看明白，原文中有一些英文注釋我就不一一說明了。代碼部分不是很多，我直接寫了個示例。
鼠標移動到上面，可以看到效果。其中返回的direction的值為“0,1,2,3”分別對應着“上，右，下，左”
所以結果值可以switch循環
switch (direction) {
case 0:
$(this).html('上方進入');
break;
case 1:
$(this).html('右側進入');
break;
case 2:
$(this).html('下方進入');
break;
case 3:
$(this).html('左側進入');
break;
}
原文代碼是基於jquery的，后面我寫了個原生的js效果，代碼沒有封裝，給需要的朋友。由於firefox等瀏覽器不支持mouseenter,mouseleave事件，所以我暫時用mouseover,mouseout代替了，如果大家需要解決冒泡問題的話，還是自行搜索兼容性解決方法吧。
var wrap = document.getElementById('wrap');
var hoverDir = function(e){
var w=wrap.offsetWidth;
var h=wrap.offsetHeight;
var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
var dirName = new Array('上方','右側','下方','左側');
if(e.type == 'mouseover' || e.type == 'mouseenter'){
wrap.innerHTML=dirName[direction]+'進入';
}else{
wrap.innerHTML=dirName[direction]+'離開';
}
}
if(window.addEventListener){
wrap.addEventListener('mouseover',hoverDir,false);
wrap.addEventListener('mouseout',hoverDir,false);
}else if(window.attachEvent){
wrap.attachEvent('onmouseenter',hoverDir);
wrap.attachEvent('onmouseleave',hoverDir);
}
作者：痞子
原貼地址：http://www.niumowang.org/javascript/js-direction/