判断鼠标进入方向

57 阅读1分钟

**需求:**判断鼠标进入div的方向

浏览器对鼠标的移动是监听事件,有时间间隔。所以使用首次监听到的鼠标位置和div中心的位置计算角度

const container = document.querySelector('.container')

const rect = container.getBoundingClientRect()

// 计算基础角度(45度)
const basicDeg = Math.PI / 4

container.addEventListener('mouseenter', e => {
  // 获取鼠标相对于容器中心的位置
  const x = e.offsetX - rect.width / 2
  const y = rect.height / 2 - e.offsetY

  // 计算鼠标位置与中心点的角度
  const deg = Math.atan2(y, x)

  // 判断进入方向
  if (deg >= -basicDeg && deg < basicDeg) {
    console.log('从右侧进入')
  } else if (deg >= basicDeg && deg < Math.PI - basicDeg) {
    console.log('从上方进入')
  } else if (deg >= Math.PI - basicDeg || deg < -Math.PI + basicDeg) {
    console.log('从左侧进入')
  } else {
    console.log('从下方进入')
  }
})

内容来自:dy-渡一