shard-ui에서 select를 사용하고 있었는데, 갑자기 클릭이 되지 않았다. 문제를 찾아보다 pointer-events라는 속성을 알게 되었다.
목차
pointer-events
CSS의 속성중에 하나인 pointer-events 속성은 개발자가 HTML 요소가 마우스/터치 이벤트에 어떻게 반응할지를 제어할 수 있게 해준다. 이 속성은 웹 요소와 사용자의 상호작용에 상당한 영향을 미칠 수 있다.
무엇을 할 수 있을까?
기본적으로 pointer-events는 요소가 마우스 이벤트의 대상이 될 수 있는지를 결정한다. 이러한 이벤트에는
- click
- hover
- drag
- 각 종 mouse event
등이 있다.
사용법
pointer-events: none;
pointer-events: auto;- none: 요소가 마우스 이벤트를 받지 않는다.
- auto: 요소가 마우스 이벤트를 받는다.
사용처
-
요소를 클릭할 수 없게 하고 싶을 때 요소를 숨기거나 외관을 변경하지 않아도, 일시적으로나 영구적으로 사용자 상호작용을 비활성화 할 수 있다.
-
계층화된 인터페이스 이번에 작업을 하면서 문제가 된 부분이, drawer 위에서 select가 클릭이 되지 않는 문제였다. drawer도 drag이벤트의 대상이 되고 있고, select도 마우스 이벤트의 대상이 되고 있었기 때문에 발생한 문제였다. 어떤 요소가 마우스 이벤트의 대상이 되야 하는지 명확히 하지 못해서 생긴 문제였다.
-
svg 그래픽
none과auto값 외에도 svg를 대상으로 하는 값들이 있다. 특정 fill이나 stroke에 대해서만 이벤트를 받게 할 수 있다. 이는 svg 그래픽을 사용할 때 유용하게 사용할 수 있다.
마치며
pointer-events는 요소가 마우스 이벤트를 받을지 말지를 결정하는 속성이다. 이 속성을 사용하면 사용자 상호작용을 더욱 세밀하게 제어할 수 있다. 하지만 이 속성을 사용할 때는 사용자 경험을 고려해야 한다. 사용자가 예상하지 못한 동작을 하게 할 수 있기 때문이다.