マウスが要素に入る方向を判断する方法

ここではH 5 EDU
機構公式のHTML 5
マウスが要素に入る方向を判断するトレーニングチュートリアル
JavaScript強化チュートリアル
ここでは主にマウスが要素を滑ったとき、マウスが入る方向を判断することを紹介します.
最初のステップでは、wrapを例に、リスニングする要素にイベントリスニングを追加します.

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); 
} 

ブラウザによって互換性のあるリスニングイベント
2.リスニングイベントを構築するコールバック関数に基づいて.

var hoverDir = function(e){ 
var w=wrap.offsetWidth; //      //offsetLeft     
var h=wrap.offsetHeight; 
// clientX            （    ）     。
// offsetLeft     (    )     
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); 
//x,y                 
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI))) / 90) + 3) % 4; 
//              ，          
var eventType = e.type; 
var dirName = new Array('  ','  ',' 、  ','you '); 
if(e.type == 'mouseover' || e.type == 'mouseenter'){ 
	wrap.innerHTML=dirName[direction]+'  '; 
	}else{ 
	wrap.innerHTML=dirName[direction]+'  '; 
} 

} 

//