e.preventDefault 는 언제 쓰나요?

05.08.2021 — JAVASCRIPT, 2021 — 2 min read

먼저 e 는 뭐여?

이벤트 객체 e 는 이벤트가 발생시 이벤트에 대한 정보가 담겨있따.

e.preventDefault() 를 통해서..

React에서는 명시적으로 preventDefault 을 호출한다 e.preventDefault() 를 사용해서 이벤트를 취소한다

e.preventDefault() 를 사용해서 마우스 우클릭을 막자

html div 이벤트 onContextMenu 를 활용해 마우스 우클릭을 막을 수 있다

<div
    onContextMenu={
        (e) => {
            e.preventDefault();
        }
    }>
    //post
</div>

tip > * react 코드에서 div 마우스이동막고/복사(ctrl+v)/마우스 우클릭 막기

<div
    onMouseMove={(e) => {
        e.preventDefault()
    }}
    onCopy={(e) => {
        e.preventDefault()
    }}
    onContextMenu={(e) => {
        e.preventDefault();
    }}
>
   {"중요 내용"}
</div>

https://ko.legacy.reactjs.org/docs/handling-events.html

React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

e는 합성 이벤트

e.stopPropagation

이벤트가 상위 엘리먼트에 전달되지 않게 막아준다.

(e.preventDefault : 동작을 중단!)

출처

https://365kim.tistory.com/62 https://ko.javascript.info/introduction-browser-events https://velog.io/@yiyb0603/JS-e.preventDefault%EC%99%80-e.stopPropagation%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 https://ko.reactjs.org/docs/handling-events.html