如何检查点击事件是发生在特定元素之内还是之外

Question

我正在收听 window 上的 click 冒泡事件，我想检查点击是否发生在特定元素内以便分派（或不分派）操作。我的组件的 inerestinc 部分如下：

const handleClickOutsideSearchArea = (event: Event) => {
    if (!textAreaRef?.current?.contains(event.target)) {
        dispatch({type: <MY-ACTION>});
    }
};

window.addEventListener('click', handleClickOutsideSearchArea);

此代码有效，但是 event.target 是一个 EventTarget 是否 contains 需要一个 Node，一个 EventTarget 的 child，然后流投诉吧。

我该如何解决这个问题？有没有办法从事件中获取节点？

Answer 1

问题是 EventTraget 可能包含 Element、Document 或 Window 的实例，而后者没有 contains方法。

您可以通过检查您的 EventTarget 不是 window 并将您的类型转换为 Element 来解决它，即 (!textAreaRef?.current?.contains(event.target as Element)) { ...

添加一些美感后，这看起来像：

const { target } = event;
if(target !== window) { // or !!target.contains to check for the presence of the method
  const containsTarget = textAreaRef?.current?.contains(target as Element);
  if(containsTarget) {
   dispatch({type: <MY-ACTION>});
  }
}

如何检查点击事件是发生在特定元素之内还是之外

how to check if a click event occurred within or outside a specific element

reactjs

dom

dom-events

flowtype