html5 휴대폰 터치스크린 터치 이벤트 상세 소개

HTML5에는 많은 새로운 이벤트가 추가되었지만 호환성 문제가 그다지 이상적이지 않고 실제 적용이 그리 강력하지 않기 때문에 여기서는 기본적으로 좋은 응용 프로그램과 널리 호환되는 이벤트만 공유합니다. 앞으로 호환성 상황이 개선됨에 따라 앞으로 더 많은 공유가 추가될 예정입니다.

오늘 소개할 이벤트는 주로 터치 이벤트입니다.

touchstart: 터치가 시작될 때 발생
touchmove: 화면에서 손가락이 슬라이드될 때 발생
touchend: 터치

터치 시 트리거됨: 현재 화면에 있는 모든 손가락 목록.

targetTouches: 현재 DOM 요소에 위치한 손가락 목록입니다.

changedTouches: 현재 이벤트에 관련된 손가락 목록입니다.

각 터치 포인트에는 다음과 같은 터치 정보(일반적으로 사용됨)가 포함됩니다.

식별자: 터치 세션에서 현재 손가락을 고유하게 식별하는 숫자 값입니다. 일반적으로 0부터 시작하는 일련번호(android4.1, uc)

target: 액션의 타겟인 DOM 요소입니다.

pageX/pageX/clientX/clientY/screenX/screenY: 값, 작업이 발생하는 화면의 위치(페이지에는 스크롤 거리가 포함되고 클라이언트에는 스크롤 거리가 포함되지 않으며 화면은 화면을 기반으로 함) .
radiusX/radiusY/rotationAngle: 타원의 두 반경과 회전 각도를 각각 사용하여 대략 손가락 모양과 동일한 타원을 그립니다. 예비 테스트 브라우저에서는 이 기능을 지원하지 않습니다. 다행히 일반적으로 사용되는 기능은 아닙니다.

코드는 다음과 같습니다.

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);

위 내용은 html5 휴대폰 터치스크린 터치 이벤트 상세 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!