JS判断鼠标从什么方向进入一个容器【黑马web前端】

更新时间:2019年07月26日 11时15分03秒来源:黑马程序员论坛

一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几个块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的，原文地址

说实话，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白，原文中有一些英文注释我就不一一说明了。代码部分不是很多，我直接写了个示例。

[HTML] 纯文本查看 复制代码

<!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>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script>
$("#wrap").bind("mouseenter mouseleave",
function(e) {
    var w = $(this).width();
    var h = $(this).height();
    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
    var y = (e.pageY - this.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 == 'mouseenter'){
        $(this).html(dirName[direction]+'进入');
    }else{
        $(this).html(dirName[direction]+'离开');
    }
});
</script>
</body>

鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环

[JavaScript] 纯文本查看 复制代码

switch (direction) {
  case 0:
    $(this).html('上方进入');
    break;
  case 1:
    $(this).html('右侧进入');
    break;
  case 2:
    $(this).html('下方进入');
    break;
  case 3:
    $(this).html('左侧进入');
    break;
}

原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。

[JavaScript] 纯文本查看 复制代码

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

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

JS判断鼠标从什么方向进入一个容器【黑马web前端】

相关阅读