我想在鼠标点击的坐标位置显示一个 div。

huangapple go评论71阅读模式
英文:

I want to display a div on the mouseClick Coordinates

问题

这个div实际上是一个模态框,我正在使用tailwind CSS来创建它。

我想要这些像素值。

英文:

The div is actually a modal, I am using tailwind CSS with this

<div className={( displayModal ? 'block' : 'hidden' ) + ` w-screen h-screen absolute top-${hereIWantToPlaceXValueInPx} left=${hereIWantToPlaceYInPx} z-20 grid`}>
</div>

I want these pixel values

答案1

得分: 1

你需要捕获点击事件,然后从事件体中获取必要的坐标,根据你的实现,这些坐标可能是screenXscreenY,或者是clientYclientX

const [position, setPosition] = useState({});
useEffect(() => {
  const handleClick = (event) => {
    // 或者使用 event.clientY 和 event.clientX
    setPosition({
      x: event.screenX,
      y: event.screenY,
    });
  };

  window.addEventListener("click", handleClick);

  return () => {
    window.removeEventListener("click", handleClick);
  };
}, []);
英文:

You need to capture the click event and then get the necessary coordinates from the event body, depending on your implementation, these are either screenX and screenY or clientY and clientX:

const [position, setPosition] = useState({});
  useEffect(() => {
    const handleClick = (event) => {
      // or event.clientY and event.clientX
      setPosition({
        x: event.screenX,
        y: event.screenY,
      });
    };

    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("click", handleClick);
    };
  }, []);

答案2

得分: 1

你可以将鼠标位置存储在状态中作为一个对象,然后在返回你的 JSX 时使用它。

这个想法很简单,你可以有一个名为 mousePos 的状态,例如,初始化为 {x: 0, y: 0}(或适合你的任何值),然后监听 window 上的点击事件来更新你的状态,你可以直接用它来更改你的 className 字符串中的值。

const MyComponent = props => {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() => {
    // 更新位置状态变量的点击处理程序
    const clickHandler = e => setMousePos({
      x: event.clientX,
      y: event.clientY,
    });

    // 监听窗口上的点击事件
    window.addEventListener('click', clickHandler);

    // 在卸载时简单地移除点击监听器
    return () => window.removeEventListener('click', clickHandler);
  }, []);
  return (
      <div className={`${props.displayModal ? 'block' : 'hidden'} w-screen h-screen absolute top-${mousePos.x} left=${mousePos.y} z-20 grid`}>
          我是一个模型! 
      </div>;
  );
}

export default MyComponent;

你还可以创建一个自定义钩子,允许你在任何需要的组件中获取鼠标位置,类似于:

export default function useMousePosition() {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() => {
    const clickHandler = e => setMousePos({
      x: event.clientX,
      y: event.clientY,
    });
    window.addEventListener('click', clickHandler);
    return () => window.removeEventListener('click', clickHandler);
  }, []);
  return mousePos;
}

// 然后在你的组件中如下使用它
//   const mousePos = useMousePos();
英文:

You could store the mouse position in the state as an object and then use it when you return your JSX.

The idea is simple, you'll have a state named, for example, mousePos that is an object initialized as {x: 0, y: 0} (or whatever suits you) then you listen for the click event on the window to update your state which you can use to directly change the values in your className string.

const MyComponent = props =&gt; {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() =&gt; {
    // the click handler that updates the position state variable
    const clickHandler = e =&gt; setMousePos({
      x: event.clientX,
      y: event.clientY,
    });

    // listen for the click event on the window
    window.addEventListener(&#39;click&#39;, clickHandler);

    // on unmount simply remove the click listener
    return () =&gt; window.removeEventListener(&#39;click&#39;, clickHandler);
  }, []);
  return (
      &lt;div className = {`${props.displayModal ? &#39;block&#39; : &#39;hidden&#39;} w-screen h-screen absolute top-${mousePos.x} left=${mousePos.y} z-20 grid`}&gt;
          I Am a model! 
      &lt;/div&gt;;
  );
}

export default MyComponent;

You might also create a custom hook that allows you to get the mouse position on any component you need, something like:

export default function useMousePosition() {
  const [mousePos, setMousePos] = useState({
    x: 0,
    y: 0
  });
  useEffect(() =&gt; {
    const clickHandler = e =&gt; setMousePos({
      x: event.clientX,
      y: event.clientY,
    });
    window.addEventListener(&#39;click&#39;, clickHandler);
    return () =&gt; window.removeEventListener(&#39;click&#39;, clickHandler);
  }, []);
  return mousePos;
}

// then use it as follow in your components
//   const mousePos = useMousePos();

huangapple
  • 本文由 发表于 2023年6月19日 20:44:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76506750.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定