在 css 中固定位置的光标事件

Question

所以我用 tailwindcss 制作了这个简单的弹出窗口，它将显示项目描述。 看起来是这样的：

import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
import Button from "../../../components/elements/Button";
import ReactMarkdown from "react-markdown";
import { Repo } from "../../../lib/types/Repos";

interface PageProps {
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  project: Repo;
}

export default function ProjectDescription({ setIsOpen, project }: PageProps) {
  useEffect(() => {
    document.body.style.overflow = "hidden";
  }, []);
  const close = () => {
    document.body.style.overflow = "auto";
    setIsOpen(false);
  };
  return (
    <div
      onClick={close}
      className="fixed inset-0 h-full w-full flex z-20 justify-center items-center p-4 cursor-pointer"
      style={{ backgroundColor: "rgba(0,0,0,0.3)" }}
    >
      <div className="bg-gray-50 shadow-md scrollbar z-[9999999]  max-w-xl max-h-[600px] w-full h-auto px-8 py-8 overflow-auto rounded-md">
        <div className="flex justify-between items-center">
          <p className="text-gray-700">
            Project built with:{" "}
            <strong className="text-indigo-600">{project.language}</strong>
          </p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-8 w-8 text-gray-900 cursor-pointer"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            onClick={close}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </div>
        {project.readme && (
          <ReactMarkdown
            children={project.readme}
            className="prose prose-indigo"
          />
        )}
        <div className="mt-4">
          <Button>Webiste</Button>
          <a className="ml-4">Github</a>
        </div>
      </div>
    </div>
  );
}

现在的问题是这个容器（上面的div）有点击事件，他里面的第一个div也有同样的事件？？？基本上我可以点击里面的 div 并关闭模式。那不应该发生吗？有人可以解释一下发生了什么。

Answer 1

如果您将 onClick 事件提供给父 div，您可以通过单击子潜水来调用相同的事件。这是因为您再次单击的第一件事将是父级。将 z-[9999999] 的 z-9999 insted 赋予子 div。通常，您在制作模式时想要做的是将 onClick(close) 事件设置为按钮，而不是完全 div 本身。在您的情况下，您可以将 onHide(close) 设置为父 div。通过这种方式，您可以通过单击模态外部来关闭模态。