# All files / src/chap03 EventPoint.js

0% Statements 0/10
100% Branches 0/0
0% Functions 0/2
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

     import { useState } from 'react';
    import './EventPoint.css';

    export default function EventPoint() {
      const [screen, setScreen] = useState({ x: 0, y: 0 });
      const [page, setPage]     = useState({ x: 0, y: 0 });
      const [client, setClient] = useState({ x: 0, y: 0 });
      const [offset, setOffset] = useState({ x: 0, y: 0 });

      // 포인터 위치를 각각의 기준에 따라 표시
      const handleMousemove = e => {
        setScreen({ x: e.screenX, y: e.screenY });
        setPage({ x: e.pageX, y: e.pageY });
        setClient({ x: e.clientX, y: e.clientY });
        setOffset({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
      };

      return (
        <div id="main" onMouseMove={handleMousemove}>
        screen: {screen.x}/{screen.y}<br />
        page: {page.x}/{page.y}<br />
        client: {client.x}/{client.y}<br />
        offset: {offset.x}/{offset.y}
        </div>
      );
    }