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 |