[2024.08.13] [검색] 꾹 눌러 단어 삭제하기

검색 필터로 나라 이름을 보여주는 UI를 추가한 이후 만든 꾹 눌러 단어 삭제하는 기능.

디자이너님이 요청해주셔서 만들어봤는데 완성되니 예쁘고, 디테일도 올라간 느낌이다~

 

 

꾹~ 누르면 삭제

 

 

※ 구현 로직

Q. 꾹 누르는 것? 
  A. mousedown(커서 누르기)이 일어나고 몇 초뒤 뒤에 mouseup(커서 떼기)이 일어남

- 필터 단어를 누르면 n초 뒤에 삭제되도록 setTimeout을 걸어두고, mouseup이 지정된 시간 전에 일어나면 꾹 누르는게 취소되었으니 clearTimeout으로  setTimeout을 삭제시킴

- once:true => 이벤트 핸들러가 한 번만 실행되고 바로 삭제되게 함

적용한 함수

적용한 곳

 

2. 모바일 지원(+ 추가 기능)

- window 객체에 touchstart 이벤트가 있으면 모바일 환경

- touchcancel, mouseleaver까지 추가하여 클릭 도중 이탈하였을 때도 대응