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와 버튼이 겹친 부분을 클릭해도 버튼클릭을 할 수 있다.

'CSS, Tailwind' 카테고리의 다른 글

CSS Cascading  (0) 2025.06.21
z-index 가 안 먹힌다? 쌓임 맥락 (stacking context)  (0) 2025.06.16
white-space 로 줄바꿈 강제로 막기  (0) 2024.07.03
pageX 와 clientX 의 차이 CSS  (1) 2024.07.02

+ Recent posts