4.5 Sensors -- useElementByPoint

4.5 Sensors – useElementByPoint

https://vueuse.org/core/useElementByPoint/

作用

根据鼠标位置，实时返回鼠标所在的dom元素。

官方示例

import { useElementByPoint, useMouse } from '@vueuse/core'

// useMouse 返回鼠标的实时位置
const { x, y } = useMouse({ type: 'client' })
// 根据坐标，返回最上层的dom元素
const { element } = useElementByPoint({ x, y })

示例中的背景颜色，是根据element的上下左右边距来绘制的。

源码分析

在requestAnimationFrame回调中执行document?.elementFromPoint，获取坐标点最上层的元素。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementFromPoint

export function useElementByPoint(options: UseElementByPointOptions) {
  const element = ref<HTMLElement | null>(null)

  const { x, y, document = defaultDocument } = options

  /**
  * useRafFn：每次执行requestAnimationFrame，回调都执行一次。这个函数可以保证回调一定会执行。
  */ 
  const controls = useRafFn(() => {
    element.value = (document?.elementFromPoint(resolveUnref(x), resolveUnref(y)) || null) as HTMLElement | null
  })

  return {
    element,
    ...controls,
  }
}