JS判断鼠标进入容器的方向与判断鼠标进入容器的方向与window.open新窗口被拦截的新窗口被拦截的
问题问题
一、鼠标进入容器方向的判定一、鼠标进入容器方向的判定
判断鼠标从哪个方向进入元素容器是一个经常碰到的问题，如何来判断呢？
首先想到的是：获取鼠标的位置，然后经过一大堆的if..else逻辑来确定。这样的做法比较繁琐，下面介绍两种比较方便的方
法：
第一种方法，利用圆和反正切三角函数第一种方法，利用圆和反正切三角函数
如下图所示：
以div容器的中心点作为圆心，以高和宽的最小值作为直径画圆，将圆以[π/4，3π/4)，[3π/4，5π/4），[5π/4，7π/4)，[-
π/4，π/4)划分为四个象限。
代码如下：
$(".box").on("mouseenter mouseleave",function(e){
/** 获取容器宽高 **/
var w = $(this).width();
var h = $(this).height();
/** 计算X和Y相对于圆心点的距离，如果不是正方形，按照X，Y谁小按谁进行比例缩放**/
var x = (e.pageX - $(this).offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - $(this).offset().top - (h/2)) * ( h > w ? (w/h) : 1 );
/** 根据X，Y的值，做反正切atan2计算，返回值在[-π，π]之间 ,这里加上180，剔除负值**/
/** 如果不加180，则0，1，2，3对应下左上右**/
/** 除以90并四舍五入，使得可以以45度为分割线，获取象限**/
/** 加3与4取模，将0,1,2,3对应t,r,b,l既上右下左**/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 )+3)%4;
switch(direction) {
case 0:
/** 上 **/
break;
case 1:
/** 右 **/
break;
case 2:
/** 下 **/
资源评论
