gongboo

 React에서 `onSubmit` 이벤트가 예상치 않게 작동하는 경우는 여러 가지가 있을 수 있습니다. 코드를 보면, `onSubmit` 핸들러는 `form` 태그에 바인딩되어 있어서, "Submit" 버튼을 클릭하면 `makeCrossWord` 함수가 호출되어야 합니다. 하지만, 어떤 상황에서는 사용자가 "Submit" 버튼을 클릭하지 않았음에도 불구하고 이 함수가 호출되는 것처럼 보일 수 있는데, 그 원인 중 일부를 살펴보겠습니다: 1. **버튼의 기본 타입**: HTML에서 `<button>` 태그의 기본 `type`은 `submit`입니다. 이는 `<button>`이 `form` 내에 있을 때, 클릭되면 `form`의 `onSubmit` 이벤트를 발생시킨다는 것을 의미합니다. 코드 내에 "목록 보이기" 옆에 있는 추가 버튼(`<button onClick={...}>+</button>`)에 `type="button"`을 명시적으로 추가하지 않으면, 이 버튼이 클릭될 때도 `form`이 제출될 수 있습니다. 이를 해결하기 위해, 해당 버튼에 `type="button"`을 추가해 보세요:    ```jsx    <button      type="button"      onClick={() => {        setwordLst([...wordlst, ""]);      }}    >      +    </button>    ``` 2. **이벤트 버블링**: 때때로, 버튼 클릭 이벤트가 상위 DOM 요소로 전파되어 `form`의 `onSubmit`을 실수로 트리거할 수 있습니다. 그러나 이 사례에서는 `e.preventDefault()`가 `onSub...

 touch에는 기본적으로 touch over라는게 없다. 터치가 그런식으로 작동하지 않기때문.. 해결 과정 touch-action을 none으로 바꿔서 브라우저가 터치 액션을 네이티브 액션으로 캐치하지 않도록 하자 https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not -> 이건 실패 이걸로 해결했다 https://stackoverflow.com/questions/70973822/no-pointerenter-event-if-you-touch-and-then-move-into-element ``` function handlePointerDown ( e ) { e. target . releasePointerCapture (e. pointerId ) } ``` e.target.releasePointerCapture(e.pointerId)는 이벤트와 연관된 포인터의 캡처를 해제합니다. 여기서 e.target은 이벤트가 발생한 요소, e.pointerId는 이벤트를 발생시킨 포인터의 고유 식별자입니다. 포인터 캡처는 요소가 포인터 이벤트(예: 마우스, 터치)를 독점적으로 받도록 할 때 사용됩니다. 이 코드는 특정 상황에서 포인터 캡처를 해제하여 다른 요소들도 포인터 이벤트를 받을 수 있도록 하는데 사용됩니다.