html - TypeScript:ev.target 和 Node.contains:EventTarget 不可分配给 Node

Question

这是代码:

function bodyClickHandler(ev: MouseEvent) {
    if(containerRef.current && containerRef.current.contains(ev.target)) return;
    setOpen(false);
}

错误:

Argument of type 'EventTarget | null' is not assignable to parameter of type 'Node | null'. Type 'EventTarget' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 44 more.ts(2345)

containerRef.current是 HTMLDivElement . .contains应该是 this function .

是 ev.target不保证是 Node某种？

我可以转换它( ev.target as Node )但我想弄清楚在什么情况下这可能会失败？我可以点击什么不是节点？

Answer 1

简短回答:这是由于他们的打字不佳。继续投吧。

长答案:发生这种情况的原因是因为如果您单击 <svg />在按钮内(例如)，event.target将指向 SVG，它不能保证是一个按钮(显然)。只有一个事件的currentTarget指向处理程序所在的元素。因此，制作 React 类型的人决定定义和事件的 currentTarget作为什么button在我们的示例中，但不保证事件的 target除了它是一个 EventTarget。因此，您不得不强制转换它。这在 this PR 中讨论.