touchstart 예제

따라서 터치존 div를 식별하고, 터치스타트 이벤트에 리스너를 연결하고, 처리기 기능인 touchHandler를 등록하기만 하면 됩니다. 참고: 터치 시작 이벤트는 터치 스크린이 있는 장치에서만 작동합니다. 참고: IDL 특성을 반영하는 두 가지 방법 모두 플랫폼 개체에서 속성을 작업하도록 설정하고 간단히 설정할 수 있습니다. 예를 들어 Touch 개체aTouch가 주어지면 aTouch.target을 평가하면 Touch 개체에 대한 EventTarget이 반환됩니다. 사용자 에이전트가 IDL 특성을 접근자 속성으로 구현하는 경우 속성 액세스는 EventTarget을 반환하는 getter를 호출합니다. 사용자 에이전트가 접근자 속성에서 찾을 수 있는 것과 동일한 동작을 가진 플랫폼 개체의 데이터 속성으로 IDL 특성을 구현하는 경우 개체에는 값이 EventTarget 개체인 “target”이라는 자체 속성이 있는 것으로 나타납니다. 속성 액세스는 이 값을 반환합니다. 아래 예제에서는 TouchEvent에 정의된 다른 TouchList 멤버 간의 관계를 보여 줍니다. 터치 스타트 이벤트의 경우 현재 이벤트와 함께 활성화된 터치 포인트 목록이어야 합니다. touchmove 이벤트의 경우 마지막 이벤트 이후 이동한 터치 포인트 목록이어야 합니다. 터치 엔드 및 터치 취소 이벤트의 경우 표면에서 방금 제거된 터치 포인트 목록이어야 합니다. 마지막 예제에서는 캔버스 요소와 터치 스타트 이벤트를 사용하여 단일 터치를 점으로 시각화하는 방법을 보았습니다. 이제 우리는 믹스에 터치 이동 이벤트를 추가 할 때 우리가 무엇을 할 수 있는지 살펴 보겠습니다.

터치스타트 이벤트는 단일 포인트 터치를 캡처하는 데 유용했습니다. 그러나 touchmove를 사용하면 스 와이프 및 기타 제스처를 캡처 할 수 있습니다. 다음 문서에서는 터치 이벤트를 사용하는 방법을 설명하고 예제 코드를 포함합니다: 외부 #track DIV는 상대적으로 배치된 요소이며 내부에 포함된 #box2 DIV는 절대적으로 배치됩니다. 우리는 터치 스타트 이벤트에서 #box2 초기 왼쪽 위치와 터치 포인트의 x 좌표를 얻습니다. 참고 여기 touchobj.clientX를 사용 하 고 있습니다. 우리는 쉽게 touchobj.pageX 대신 사용할 수 있습니다., 그것은 중요 하지 않습니다., 이후 우리는 단지 터치 포인트에 의해 이동 하는 상대적인 거리를 확인 하는 데 도움이이 속성을 사용 하 고.

Posted in Uncategorised