[#. JavaScript] js touch event 사용하기 touchstart, touchend, touchmove, 클릭할 시에는 이벤트 발생하지만 스크롤 시에는 이벤트 발생되지 않도록 하기

 

 

 

 

웹에서 삭제 기능을 구현하려고 할 때

상단의 삭제 버튼을 클릭하면 데이터1, 데이터2 등 리스트 옆에 삭제 텍스트가 뜨고

삭제 아이콘을 제외한 영역을 클릭했을 때는 삭제 아이콘이 사라지고

리스트를 스크롤했을 때는 삭제 아이콘을 유지하려고 한다

 

 

 

 

 

touchstart

터치를 시작했을 때 발생한다

 

touchmove

터치한 채 움직일 때 발생한다(스크롤)

 

touchend

터치가 끝났을 때, 손가락을 뗐을 때 발생한다

 

 

 

 

 

JS

 

let dragging = false;

$(".wrapper").on("touchstart", function(e){
  dragging = false;
});

$(".wrapper").on("touchmove", function() {
  dragging = true;
});

$(".wrapper").on("touchend", function(e){
  if(dragging) return false;

  if(!$(e.target).hasClass("delete-txt")) {	// 상단 삭제 텍스트 제외한 영역 클릭 시 삭제 버튼 숨기기
    $(".delete-btn").hide();
  }
});

 

 

 

 

 

 

 

 

이렇게 스크롤을 해도 삭제 버튼이 유지되는 것을 볼 수 있다