ionic button longpress (길게 누르기)

안녕하세요. IT김군입니다.

이번에는 Ionic Button에서 longPress에 대해 알아보도록 하겠습니다.

ionic button을 html에 생성하실 때 아래와 같이 생성하시면 됩니다. (A,B,C,D,E에 대한 설명은 아래 추가하겠습니다.)

<button ion-button ion-long-press [interval]="A" (onPressStart)="B" (onPressing)="C"
(onPressEnd)="D">E</button>

A = 몇 초에 한 번씩 이벤트를 발생할 것인지 시간을 적는 부분입니다. 만약 2초를 선택하시려면 2000을 적어주시면 됩니다.

B = 처음 누르기 시작할 때의 이벤트입니다. typescript 파일에 코딩한 function을 많이 사용합니다.

C = A에서 입력된 시간만큼 버튼을 누르고 있을 시 발생할 이벤트입니다. typescript 파일에 코딩한 function을 많이 사용합니다.

D = 버튼을 누르고 땔 때 발생하는 이벤트입니다. A에서 입력한 만큼 누르고 있지 않아도 땔 때마다 이벤트가 발생합니다. typescript 파일에 코딩한 function을 

      많이 사용합니다.

E = 버튼의 이름입니다. 버튼의 이름을 자유롭게 입력해주시면 됩니다.

예를 들어 버튼을 누르자마자 start()를 호출하고 5초간 누르고 있을 시 press()를 호출하고 버튼에서 손을 땔 때 end()를 호출하는 '테스트'라는 이름의 버튼을 만들고 싶다면

<button ion-button ion-long-press [interval]="5000" (onPressStart)="start()" (onPressing)="press()"
(onPressEnd)="end()">테스트</button>

위와 같이 코딩해주시면 됩니다.

추가하실 기능들은 직접 응용하셔서 추가하시면 될 것 같습니다.

궁금하신 점 있으시면 댓글 달아주세요.

감사합니다.