本文介绍如何判断鼠标进入容器的方向。通过计算鼠标相对于容器中心的坐标角度，利用Math.atan2确定方位。示例包含jQuery与原生JS两种实现，处理了mouseenter/mouseleave及兼容性问题，返回0-3分别对应上右下左。
鼠标进入方向检测原理与jQuery实现
针对如何判断鼠标进入容器方向的问题，一种直观思路是在容器四周设置监听区域，通过触发顺序判断方向，但实现较为繁琐。经过检索发现一种基于数学计算的高效方案，该方案依赖jQuery库。其中核心公式 var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 涉及三角函数与角度转换，具体数学原理参考原文英文注释。以下为简化后的示例代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div id="wrap"> 方向反馈 </div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
将鼠标悬停于容器上方即可看到效果。该算法返回的 direction 值为“0,1,2,3”，分别对应“上，右，下，左”四个方向。
根据计算出的 direction 值，可使用 switch 语句进行分支处理。
switch (direction) { case 0: $(this).html('上方进入'); break; case 1: $(this).html('右侧进入'); break; case 2: $(this).html('下方进入'); break; case 3: $(this).html('左侧进入'); break; } [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
原生JavaScript兼容实现方案
原始示例基于jQuery，此处提供未封装的原生JavaScript实现供参考。鉴于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); } [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]