如何防止onmouseleave事件在浏览器外部被触发？

Question

我尝试了一下，当鼠标进入篮子时，会出现一个带有按钮的下拉菜单。当我们点击按钮时，会弹出一个模态框。我希望模态框只有在点击关闭模态框按钮时才关闭。但是当我们将鼠标移出浏览器时，会触发hideDropdown函数并关闭模态框。我将hideDropdown函数作为prop发送到更新模态状态的组件，但这次只有hideDropdown函数起作用，isModalShow状态没有更新。我该如何解决这个问题？

演示：https://codesandbox.io/s/jolly-buck-1lgmiu

- Enes

Answer 1

这很棘手，但我终于搞定了。您需要添加以下类似的函数。 副作用是打开模态框按钮有时会切换，但如果您将模态框提升，它就取决于下拉列表，我猜或者仅使用 CSS 实现，这将更容易。

但是，针对您的主要问题，对于onMouseleave，您可以像下面这样做。这基本上检查浏览器的边界。添加10而不是0，因为滚动条在codepen中某种程度上会干扰事件触发。因此，添加为保障。

此外，使用 onMouseOver 而不是 onMouseEnter。

 const hideDropdown = (event) => {
    if (
      event.clientY <= 10 ||
      event.clientX <= 10 ||
      event.clientX >= window.innerWidth - 10 ||
      event.clientY >= window.innerHeight - 10
    ) {
      console.log("I'm out");
      return;
    } 
    setIsDropdownShow(false);
  };

  return (
    <div className="App" onMouseOver={showDropdown} onMouseLeave={hideDropdown}>
      <span className="basket">Basket</span>
      {isDropdownShow && <Dropdown hideDropdown={hideDropdown} />}
    </div>

Here is the sandbox link

- innocent

Answer 2

你可以尝试将模态框与isDropdownShow属性取消关联，这样它只能通过OpenModal和CloseModal按钮进行切换...只是一个权宜之计

import "./styles.css";
import Dropdown from "./Dropdown";
import { useState } from "react";

export default function App() {
  const [isDropdownShow, setIsDropdownShow] = useState(false);
  const [isModalShow, setIsModalShow] = useState(false);
  
  const showDropdown = () => {
    setIsDropdownShow(true);
  };

const showModal = () => {
    setIsModalShow(true);
  };
const hideModal = () => {
    setIsModalShow(false);
  };

  const hideDropdown = () => {
    setIsDropdownShow(false);
  };

  return (
    <div
      className="App"
      
    >
  <div
      onMouseEnter={showDropdown}
      onMouseLeave={hideDropdown}>
      <span 
      
      className="basket">Basket</span>
      {isDropdownShow && <button onClick={()=>showModal}> Open 
     Modal<button/>}
  </div>
      <Dropdown hideModal={hideModal} IsModalShow={IsModalShow} />
    </div>
  );
}

- Ingenious_Hans

---

在这里，您只针对span元素进行鼠标事件。下拉菜单仅在鼠标进入篮子时可见。当您尝试点击按钮时，由于已退出篮子元素，下拉菜单将消失，我们将无法点击该按钮。 - Enes

Answer 3

基本解决方案是使用window检查用户是否在窗口中。这里是一个可工作的codesandbox示例https://codesandbox.io/embed/heuristic-pasteur-u4cd5e?fontsize=14&hidenavigation=1&theme=dark

import "./styles.css";
import Dropdown from "./Dropdown";
import { useState } from "react";

export default function App() {
  const [isDropdownShow, setIsDropdownShow] = useState(false);

  const showDropdown = () => {
    setIsDropdownShow(true);
  };

  const hideDropdown = (event) => {
    if( typeof window !== "undefined" &&
         window.document &&
         window.document.createElement ){
      return;
    }
    setIsDropdownShow(false);
  };

  return (
    <div
      className="App"
      onMouseEnter={showDropdown}
      onMouseLeave={hideDropdown}
    >
      <span className="basket">Basket</span>
      {isDropdownShow && <Dropdown hideDropdown={hideDropdown} />}
    </div>
  );
}

- Evren