css中位置固定的游标事件

所以我用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>
  );
}

import{Dispatch，SetStateAction，useffect，useRef，useState}来自“react”；
从“../../../components/elements/Button”导入按钮；
从“react markdown”导入react markdown；
从“../../../lib/types/Repos”导入{Repo}”；
界面页面道具{
setIsOpen：调度；
项目：回购；
}
导出默认函数ProjectDescription（{setIsOpen，project}:PageProps）{
useffect（（）=>{
document.body.style.overflow=“隐藏”；
}, []);
常数关闭=（）=>{
document.body.style.overflow=“自动”；
setIsOpen（假）；
};
返回(

使用以下内容生成的项目：{“”}
{project.language}

{project.readme&&(
)}
网站
github
);
}

---

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

如果你给父div一个onClick事件，你可以通过点击子div来调用相同的事件。这是因为您再次单击的第一个对象将是父对象。将z-9999而不是z-[9999999]指定给子div。通常，在创建模式时，您要执行的操作是将onClick（close）event设置为button，而不是将其本身设置为entilly div。在您的情况下，您可以将onHide（close）设置为parent div。通过这种方式，您可以通过单击模态外部来关闭模态。

z-[9999999]可以工作，它会将z-index设置为该值，我可以在浏览器中看到，我正在尝试进行覆盖，因此当您单击主div外部时，您可以关闭div。不幸的是，这不起作用。