pointerEvents : none 으로 클릭이벤트 막기

import React from "react";
import "./App.css";

export default function App() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div className="container">
      <button onClick={handleClick}>Clickable Button</button>
      <button style={{ pointerEvents: "none" }}>Disabled Button</button>
    </div>
  );
}

 

마치 removeEventListner 와 비슷하다.

 

사용 예시 ) 만약 어떤 버튼을 클릭했을 때 일어난 UI가 버튼을 막아버려서 다시 사용할 수 없게 조금 가린다면 pointerEvents : none 을 사용해서 UI와 버튼이 겹친 부분을 클릭해도 버튼클릭을 할 수 있다.