검색 필터로 나라 이름을 보여주는 UI를 추가한 이후 만든 꾹 눌러 단어 삭제하는 기능.
디자이너님이 요청해주셔서 만들어봤는데 완성되니 예쁘고, 디테일도 올라간 느낌이다~
※ 구현 로직
Q. 꾹 누르는 것?
A. mousedown(커서 누르기)이 일어나고 몇 초뒤 뒤에 mouseup(커서 떼기)이 일어남
- 필터 단어를 누르면 n초 뒤에 삭제되도록 setTimeout을 걸어두고, mouseup이 지정된 시간 전에 일어나면 꾹 누르는게 취소되었으니 clearTimeout으로 setTimeout을 삭제시킴
- once:true => 이벤트 핸들러가 한 번만 실행되고 바로 삭제되게 함
2. 모바일 지원(+ 추가 기능)
- window 객체에 touchstart 이벤트가 있으면 모바일 환경
- touchcancel, mouseleaver까지 추가하여 클릭 도중 이탈하였을 때도 대응