[CSS] pointer-events 사용으로 인한 클릭 이슈

예시 그림

그림과 같은 css구조가 있다고 가정하겠습니다. (이하 빨간색 box1, 주황색 box2)

 

형제 관계처럼 보이지만, box1을 기준으로 box2를 absoulte로 배치한 부모-자식 관계입니다.

 

box1,2에게 클릭 이벤트가 있다고 가정할 때, 겹치는 부분(교집합)을 클릭하면 이벤트가 2개가 발생합니다.

 

pointer-events

방지하기 위해, box1에 pointer-events라는 속성을 사용하였습니다. (default auto)

 

pointer-events:none;

문제는 box1과 box2가 부모-자식 관계였고, box2의 버튼도 클릭이 되지를 않는다는 것을 알게 되었습니다.

 

 

1. css상속을 생각하지 않았습니다.

 

2. 잘 모르는 것을 함부로 사용하면 안 된다는 점과,

 

3. 이벤트 계열은 되도록 스크립트단에서 해결을 하는 게 낫다는 기본적 점을 놓쳤습니다.

알고 있어도 행하지 못하면 모르는 것과 다름없다는 것을 느꼈습니다.