鼠标移入方向的解决方式

前言

先看一个效果

很简单，通过鼠标移入方向的不同做一些操作，在这个例子中只讨论实现判断鼠标移入方向的方式

思考

例如在这个蓝色方框中，通过对角线分割四个单独的三角形，我们在三角形的焦点建立一个坐标系，在这个方框中对于当前坐标系来说，我们只要计算出来方框中某一个点在坐标系中的位置到原点的连接线相对于 x 轴正轴方向的角度就可以判断出点在方框中的位置。

代码

//  获取元素
const container = ref();
const mainFun = () => {
  //得到指定元素的宽高数据
  let rect = container.value.getBoundingClientRect();
  //通过元素的宽和高计算出∠θ的反正切，也就是计算出右侧三角形的分界弧度
  const theta = Math.atan(rect.height / rect.width);
  //给元素添加鼠标移入时间
  container.value.addEventListener("mouseenter", (e) => {
    // 得到鼠标移入时在坐标系中对应的x轴的值
    const x = e.offsetX - rect.width / 2;
    // 得到鼠标移入时在坐标系中对应的y轴的值
    const y = rect.height / 2 - e.offsetY;
    // math.atan2是js提供的方法，返回正x轴到从(0,0)点到(x,y)点之间的平面角度，计算出鼠标移入时的坐标点到x正轴的角度，
    const d = Math.atan2(y, x);
    let dire;
    // 通过角度判断是从哪个方向移入的
    if (d < theta && d >= -theta) {
      dire = "right";
    } else if (d >= theta && d < Math.PI - theta) {
      dire = "up";
    } else if (d < -theta && d >= theta - Math.PI) {
      dire = "down";
    } else {
      dire = "left";
    }
    //通过添加类名改变元素的动画效果和移入效果
    container.value.classList.add(dire);
  });
  //移出鼠标时还原类名
  container.value.addEventListener("mouseleave", () => {
    container.value.className = "mouse-entry-direction-body";
  });
};

over

通过在 container 上覆盖三角元素的方法也可以解决这个问题，但是会增加不必要的 html 元素，并且如果需要在元素中有更多操作时更复杂。