TS2339：类型“EventTarget”上不存在属性“closest”。- 如何在 React 中获取本机 event.target？

Question

我正在尝试构建一个事件侦听器回调来检测它的调用位置，类似于：

import { TouchEvent } from 'react'

const isInvokedFromInsideContainer = (event: TouchEvent<HTMLElement>) => {
  parentContainer = event.target.closest('#container')
  console.log('isInvokedFromInsideContainer: ' + !!parentContainer)
}

但我得到

TS2339：“EventTarget”类型上不存在属性“closest”

event.nativeEvent.target.closest都不起作用
event.currentTarget.closest，但我显然不希望这样

将目标投射为 HTMLElement 的工作原理：

const target = (event.target as HTMLElement)
const parentContainer = target.closest('#container')

这样做的正确方法是什么？

Answer 1

我通过直接转换为修复了此event.target错误HTMLElement

所以在你的情况下：

...
  parentContainer = (event.target as HTMLElement).closest('#container')
...

Answer 2

您可以通过断言 Typescript 的构造函数来让 Typescript 了解目标的类型：

if (event.target instanceof HTMLElement) {
  const container = event.target.closest('#container')
}