JS判断鼠标从什么方向进入一个容器实例说明

时间:2020-05-13 人气:0

偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于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> 
方向反馈 
</div> 
<script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.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> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容