如何判断鼠标进入元素的方向

本文为 H5EDU 机构官方的 HTML5 培训教程，主要介绍判断鼠标进入元素的方向
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]+'离开'; 
} 

} 

//根据事件的类型 判断是 鼠标进入还是移出