判断鼠标不同方向进出盒子的方法

默认盒子的原点在左上角，判断四个方向首先要将原点移动到盒子的中点。然后获取不同方向上的点跟中点的x,y值

捕获.PNG

实现的方法是：先给盒子添加鼠标移入的事件，然后获取各点距离中点的x,y值;
js部分：

wrapper.addEventListener('mouseenter',function (e){
    var x = e.offsetX - this.offsetWidth/2,//鼠标进入点相对盒子X轴的距离减去盒子自身宽度的一半
        y = e.offsetY - this.offsetHeight/2;//鼠标进入点相对盒子Y轴的距离减去盒子自身高度的一半
});

以x,y的值不好实现判断进入的方向，将其转化成度值进行判断，可以用Math函数中的三角函数进行转化，这里采用atan2方法：

var angle = Math.atan2(y,x);//得到进入点的弧度值

Math.atan2()
Math.atan2()接受两个参数x和y,方法如下:
angel=Math.atan2(y,x)
x 指定点的 x 坐标的数字。
y 指定点的 y 坐标的数字。
计算出来的结果angel是一个弧度值,也可以表示相对直角三角形对角的角，其中 x 是临边边长，而 y 是对边边长

转化之后得到以x轴为初始边，进入点为（x,y）的角度的弧度值，在经过弧度值与角度之间的转化公式：1度 = PI/180rad 可以得到不同方向进入的角度值；

var angle = Math.atan2(y,x)*180/Math.PI;//得到进入点的角度值

如图，将盒子看成是四块，不同角度值范围代表了不同的方向：

无标题.png

（1）在角度为0_45和0_-45之间，进入边为右边；
（2）在角度为-45_-135之间，进入边为上边；
（3）在角度为-135_-180和135_180之间，进入边为左边；
（4）在角度为45-135之间，进入边为下边

范围存在负值，为了便于处理，给每个角度加上180度.
然后可以粗暴的用多个if,else进行方向判断，一般不采用此方法

var angle = Math.atan2(y,x)*180/Math.PI +180;
var direction = null;
if(135 > angle > 45) direction = "top";
else if ...

通常是将角度进行处理成简单的值进行判断，在此可以在加上180度的基础上除以90度。

var angle = (Math.atan2(y,x)*180/Math.PI +180)/90;
//得到四个方向上的不同数值范围，例如在角度为-45_-135之间，进入边为上边的最终结果为0.5_1.5

由于分成四个方向，所以再加上3，然后进行四舍五入取整，最后取4的模，将四个方向的结果处理成不同的值。

var angle = Math.round((Math.atan2(y,x)*180/Math.PI +180)/90 +3)%4;
//得到0，1，2，3分别代表不同的方向

最终完整的代码

wrapper.addEventListener('mouseenter',function (e){
    var x = e.offsetX - this.offsetWidth/2,//鼠标进入点相对盒子X轴的距离减去盒子自身宽度的一半
        y = e.offsetY - this.offsetHeight/2;//鼠标进入点相对盒子Y轴的距离减去盒子自身高度的一半
    var angle = Math.round((Math.atan2(y,x)*180/Math.PI +180)/90 +3)%4;
    var direction = null;
    swith (angle) {
          case 0: direction = 'bottom';
                break;
          case 1: direction = 'left';
                break;
          case 2: direction = 'top';
                break;
          case 3: direction = 'right';
        }
});
//每次执行该函数都会重新计算一下this.offsetWidth，this.offsetHeight发生重绘，影响性能。