> 웹 프론트엔드 > H5 튜토리얼 > 모바일 단말기의 터치 이벤트에 대한 자세한 설명

모바일 단말기의 터치 이벤트에 대한 자세한 설명

不言
풀어 주다: 2018-09-04 10:46:39
원래의
3670명이 탐색했습니다.

이 기사는 모바일 단말기의 터치 이벤트에 대한 자세한 설명을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1.touchstart

손가락이 화면을 터치하면 트리거됨

dom.addEventListener('touchstart',function(e){});
startX=e.touches[0].clientX;
로그인 후 복사

e 객체에 포함된 움직임이 반환됨 이벤트별 최종 속성: e对象包含的移动端特有的属性:
tarchTouches:目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸

2.touchmove

手指在屏幕上滑动时连续触发

dom.addEventListener('touchmove',function(e){});
로그인 후 복사

事件返回的e对象包含的移动端特有的属性:
tarchTouches:目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸

3.touchend

当手指离开屏幕时触发

dom.addEventListener('touchend',funciton(e){});
//在touchend中,touches拿不到touch对象,
//因为触摸已经结束,changedTouches中拿到触摸对象
//console.log(e);
//endX=e.touches[0];  undefined 
endX=e.changedTouches[0].clientX;
로그인 후 복사

事件返回的e tarchTouches: 대상 요소의 현재 모든 터치
selectedTouches: 페이지에서 최근에 변경된 모든 터치
touches: 페이지의 모든 터치
2 .touchmove

손가락이 화면에서 미끄러질 때 계속 트리거됨

rrreee

이벤트에서 반환된 e 개체에는 모바일- 특정 속성: #🎜🎜 # tarchTouches: 대상 요소에 대한 현재 모든 터치

selectedTouches: 페이지의 최신 변경 사항에 대한 모든 터치
touches: 페이지의 모든 터치

3.touchend
#🎜 🎜#손가락이 화면을 떠날 때 트리거됨
rrreee

이벤트에서 반환된 e 개체에는 모바일 관련 속성이 포함되어 있습니다. #🎜🎜 #changeTouches: 페이지에서 최근에 변경된 모든 터치

touchcancel: 시스템이 터치 추적을 중지하면 시작됩니다. (자주 사용되지 않음)

터치엔드 이벤트에서는 이벤트 알림이 기록됩니다.changeTouches
4. : 뷰포트에 있는 터치 대상의 X 좌표입니다.

clientY: 뷰포트에서 터치 대상의 Y 좌표입니다.

pageX: 페이지 내 터치 대상의 x 좌표입니다. pageY: 페이지에서 터치 대상의 y 좌표입니다. screenX: 화면 터치 대상의 x 좌표입니다.

screenY: 화면에서 터치 대상의 y 좌표입니다. #🎜🎜##🎜🎜#관련 권장 사항: #🎜🎜##🎜🎜##🎜🎜#javascript 모바일 개발의 터치 이벤트에 대한 자세한 설명_javascript 기술#🎜🎜##🎜🎜##🎜🎜##🎜🎜# # 🎜🎜#javascript 모바일 장치용 웹 개발에서 터치 이벤트 캡슐화의 예_javascript 기술#🎜🎜##🎜🎜#

위 내용은 모바일 단말기의 터치 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿