时间戳

首页 > 解决方案 > 单击 SVG 元素有时不起作用

javascript - 单击 SVG 元素有时不起作用

问题描述

我有一个固定位置的模态，它有X要关闭的图标，我还实现了clickOutside逻辑，当你在模态之外单击它会关闭它，它是这样写的

import React, { useEffect } from "react";

const useClickOutside = (
  refs: Array<React.MutableRefObject<HTMLElement | null>>,
  handler: (event: any) => any
) => {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      for (let ref of refs) {
         if (event.target instanceof HTMLElement && (!ref.current || 
ref.current.contains(event.target))) {
           return;
        }
      }

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [refs, handler]);
};

export default useClickOutside;

虽然这个钩子有效，但在这种特定情况下它通常会失败，当我单击 SVG 元素时，此代码会被触发并且模式关闭，我只是将位置固定到此钩子的父元素的引用作为引用传递。值得注意的是，当我添加z-index: -1到 SVG 元素时，问题得到了解决，或者pointer-events: none，为什么会发生这种情况，我已经读到 SVG 具有不同的点击上下文，但从这个角度来看，我看不出有什么问题。

标签： javascriptreactjssvg

解决方案

推荐阅读