Button에 pointer-events, -webkit-tap-highlight-color 설정하기

• 프로젝트: 채식 지도(가명)
• 키워드: pointer-events, -webkit-tap-highlight-color
• 상황
  1. 페이지 상단에 Header가 있고 Header는 3개의 버튼으로 이루어져있다. Header는 flex container이다.
     

     

     헤더

  2. 지도영역이 Header에 가려져 터치/마우스 이벤트가 일어나지 않았다. 그래서 header의 마우스 이벤트를 막았다.
     

       header.flexContainer {
       pointer-events: none;
     }

  3. 자식 컴포넌트인 왼쪽(loplat logo)과 오른쪽 아이콘 버튼들도 눌리지 않게 되었다.
• 해결방법
  1. css pointer-events: none에 대한 MDN 문서를 확인했다.
     요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/버블 단계에서 none을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.
     
  2. 자식 요소에 pointer-events 값을 지정해주었다.
     

       div.flexItem {
       pointer-events: auto;
     }

     
     
  3. 이제 아이콘 버튼 클릭 이벤트와 지도 터치 이벤트가 둘 다 일어난다!

 

• 보너스
  1. 모바일 기기에서 아이콘버튼 클릭시 파란색 box가 표시되었다.
     

     

  2. global css를 추가하여 해결했다.
     

       input,
     textarea,
     button,
     select,
     a {
       -webkit-tap-highlight-color: transparent;
     }​