javascript - 为什么节点包含方法未捕获对 svg 元素的单击？

Question

我在其 html 结构中有一个带有 svg 图标的基本模式。我想检测模态外的点击，以便关闭它。这样做的代码如下所示:

document.addEventListener('mousedown', (e) => {
  if(modal.contains(e.target)) return;
  closeModal();
});

但是，当我单击 svg (在模式内)时，单击事件被认为是在模式之外，我不知道为什么。为了让它按我的意愿工作，我必须对 svg 元素执行 pointer-events: none 。
简化的 html 结构如下所示:

  <div class="modal">
    <div class="css-t7awl3">
      <form>
        <div class="css-1incodr">
          <label class="css-g2pzhe" for="previousPassword">
            Mot de passe actuel<span class="css-5fl39m">*</span>
          </label>
        <div class="css-1xm32e0">
          <input
            class="css-17lan49"
            type="text"
            placeholder="**********"
            name="previousPassword"
          />
            <div id="test-input-toggle-password-visibility" class="css-1vw18kh">
              <svg
                height="16"
                viewBox="0 0 32 32"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              />
            </div>
          </div>
        </div>
        <button class="css-1pnrrva" disabled="">
          Valider
        </button>
      </form>
    </div>
  </div>

编辑:如果我在这里粘贴实际的 react 代码也许会有所帮助，因为我不确定它是否是 svg 元素而不是我的代码的问题。

    export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({
  placeholder,
  name,
  id,
  disabled,
  className,
}: PasswordInputProps, ref) => {
  const [showPassword, setShowPassword] = useState(false);

  const DisplayedPicto = showPassword ? ClosedEyePicto : EyePicto;

  return (
    <Container className={className}>
      <CustomInput
        className={className}
        type={showPassword ? 'text' : 'password'}
        placeholder={placeholder}
        name={name}
        disabled={disabled}
        ref={ref}
        id={id}
      />
      <StyledSuffix
        onMouseLeave={() => setShowPassword(false)}
        onMouseDown={() => setShowPassword(true)}
        onMouseUp={() => setShowPassword(false)}
        id='test-input-toggle-password-visibility'
      >
        <DisplayedPicto height={16} />  //svg element
      </StyledSuffix>
    </Container>
  );
});

Answer 1

我只是明白发生了什么，它与 svgs 无关。
发生的事情是，当我单击 svg 时，首先会触发一个“mousedown”事件。请记住，“点击”事件由两个相互跟随的事件组成:首先是“mousedown”，然后是“mouseup”。
因此，通过 svg 上的“mousedown”事件，触发了围绕我的 svg 的组件 StyledSuffix 上的 onMouseDown 事件处理程序。这导致 dom 上的 svg 实际上从 EyePicto 变为 ClosedEyPicto (const DisplayedPicto = showPassword ? ClosedEyePicto : EyePicto;)。因此，模态不再“包含”原始 svg，因为它已更改!
一种解决方案是使用事件“click”而不是“mousedown”来监听单击。因为原始svg(EyePicto)只会注册'mousedown'事件而不是'mouseup'，因为它从2之间的dom中消失了。