ev.target 和 Node.contains：EventTarget 不可分配给 Node

Question

这是代码：

function bodyClickHandler(ev: MouseEvent) {

    if(containerRef.current && containerRef.current.contains(ev.target)) return;

    setOpen(false);

}

错误：

'EventTarget | 类型的参数 null' 不可分配给类型为“Node |”的参数 无效的'。类型“EventTarget”缺少类型“Node”中的以下属性：baseURI、childNodes、firstChild、isConnected 和 44 more.ts(2345)

containerRef.current是一个HTMLDivElement. .contains应该是这个功能。

不ev.target保证是Node某种类型的吗？

我可以投射它（ev.target as Node），但我试图弄清楚在什么情况下这可能会失败？我可以点击什么不是节点？

Answer 1

简短的回答：这是由于他们的打字不当造成的。继续施放吧。长答案：发生这种情况的原因是因为如果您单击<svg />按钮内部（例如），它将event.target指向 SVG，这不能保证是按钮（显然）。只有事件currentTarget指向处理程序所在的元素。因此，做出 React 类型的人决定将事件定义currentTarget为我们示例中的内容button，但除了事件是一个 EventTarget 之外，不对事件做出任何保证。target因此，你不得不施放它。

Answer 2

我刚刚开始使用 Typescript。我有一个类似的问题，我的解决方案是，我知道该事件总是由 DomElement 触发。这就是我通知 Typescript 的方式：function bodyClickHandler(ev: MouseEvent) {&nbsp; &nbsp; if(containerRef.current && containerRef.current.contains(ev.target as HTMLElement)) return;&nbsp; &nbsp; setOpen(false);}如果您喜欢将其分开：function bodyClickHandler(ev: MouseEvent) {&nbsp; &nbsp; const target = ev.target as HTMLElement;&nbsp; &nbsp; if(containerRef.current && containerRef.current.contains(target)) return;&nbsp; &nbsp; setOpen(false);}