js获取鼠标进入盒子的方向

最近在研究web中元素的方位问题，判断进入一个元素是方向遇到另一个问题atan2(y,x)的使用。

这么多年没有关注三角函数了，好多都已经忘了。

Javascript 中定义：atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度，这个角度就是（-π，π）。

直角坐标系

javascript代码实现：

console.log(Math.atan2(20,10)); //坐标（10，20）的弧度 

onsole.log(Math.atan2(10,10)); //坐标（10，10）的弧度

onsole.log(Math.atan2(-10,10)); //坐标（10，-10）的弧度

onsole.log(Math.atan2(-10,-10)); //坐标（-10，-10）的弧度

onsole.log(Math.atan2(10,-10)); //坐标（-10，10）的弧度

结果

页面中一个矩形盒子获取鼠标进入盒子的方向

实例 鼠标从左边进入盒子

/**

* [getDirection 获取鼠标进入盒子的方向]

* @param  {[type]} ev  [事件]

* @param  {[type]} obj [盒子对象]

* @return {[type]}    [description]

*

* 函数中 x,y轴的（0,0）在内容盒子的中心

*

*/

var getDirection = function(ev, obj) {

            var w = obj.offsetWidth,

                  h = obj.offsetHeight,

                  x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),

                 y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),

                d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;

                console.log('atan2:' + Math.atan2(y, x) / 1.57079633 + 5)

               console.log('w:' + w, 'h:' + h, 'x:' + x, 'y:' + y, 'd:' + d)

               return d;

};

var addContent = function(ev, obj, state) {

                 var direction = getDirection(ev, obj);

                 switch(direction) {

                               case 0:   

                                    obj.innerHTML ='top'; break;

                               case 1:

                                    obj.innerHTML='right'; break;

                               case 2:

                                     obj.innerHTML ='bottom'; break;

                               case 3:

                                     obj.innerHTML ='left'; break;

                  }

};

// bind events

document.getElementById('con').addEventListener('mouseover', function(ev) {

                addContent(ev, this, 'in');

}, false);

document.getElementById('con').addEventListener('mouseout', function(ev) {                                                                                   addContent(ev, this, 'out');

}, false);

其实判断盒子从那个方位进入盒子有很多方法：

坐标轴系X,Y坐标判断
以盒子的右下角为原点

直角坐标系

x>0 && y>0 && x

x>0 && y>0 && x>y    (right)

x>=0 && y==0    (bottom)

x==0 && y>0    (left)