클릭 취소

보통 햄버거메뉴 같은 걸 클릭, 터치하면 컨텍스트 메뉴가 튀어나오고 뭔가를 선택하게 된다. 하지만 그렇지 않고 컨텍스트 메뉴를 닫아야 할 경우도 있다. 일반 PC에서는 햄버거를 다시 누르면 되고 그게 어렵지 않지만 모바일에서는 그렇지 않다.

해결방법

검색어

• blur event on div
  이걸로 구글에 물어보았고 https://stackoverflow.com/questions/18504139/div-onblur-function 이걸 찾았다.

솔루션

• blur 이벤트를 걸고 싶은 엘리먼트에 tabindex 를 지정하거나 div 태그일 경우에는 contentEditable 속성을 사용해도 된다.

부트스트랩

사실 이 내용은 부트스트랩의 드롭다운메뉴에 잘 구현이 되어있다. 하지만 부트스트랩을 아무리 잘 뒤져봐도 이를 구현하는 내용을 보지 못했고 유독 tabindex 가 촘촘히 들어가 있는 걸 봤다. 처음엔 그냥 접근성 때문에 그러는 줄 알았는데 이 내용때문에 들어간 것 같다. 물론 접근성도 당연히 챙긴 것 같고.

결론

원래 blur 이벤트라는 게 form 요소에만 적용되는 내용이고 jquery 가 대 유행했던 시기에는 그걸 자체적으로 구현해주는 jquery api 가 있었기에 별로 신경쓰지 않았던 내용이다. blur 이벤트를 구현하고 싶은 html element 에 tabindex 를 지정하면 사용할 수 있다.