모바일 웹 개발의 터치 이벤트(자세한 튜토리얼)
이제 모바일 웹 개발에서의 터치 이벤트 예시에 대해 자세히 설명하겠습니다. 참고할 가치가 충분하고 모든 분들께 도움이 되기를 바랍니다.
이전 단어
iOS용 Safari는 개발자에게 특별한 정보를 전달하기 위해 몇 가지 새로운 독점 이벤트를 추가했습니다. iOS 장치에는 마우스나 키보드가 없기 때문에 모바일 Safari용 대화형 웹 페이지를 개발할 때 일반적인 마우스 및 키보드 이벤트만으로는 충분하지 않습니다. Android에 WebKit이 추가되면서 이러한 독점 이벤트 중 상당수가 사실상의 표준이 되었고, 이로 인해 W3C는 터치 이벤트 사양 개발을 시작하게 되었습니다. 이번 글에서는 모바일 터치 이벤트에 대해 자세히 소개하겠습니다
개요
iOS 2.0 소프트웨어가 포함된 iPhone 3G가 출시되었을 때 새로운 버전의 Safari 브라우저도 포함되었습니다. 이 새로운 모바일 Safari는 터치 조작과 관련된 몇 가지 새로운 이벤트를 제공합니다. 나중에 Android의 브라우저도 동일한 이벤트를 구현했습니다. 터치 이벤트는 사용자가 화면에 손가락을 대거나, 화면을 가로질러 슬라이드하거나, 화면에서 멀어지면 트리거됩니다. 구체적으로 다음과 같은 터치 이벤트가 있습니다
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动 touchend:当手指从屏幕上移开时触发 touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间，文档中没有明确说明
[touchenter 및 touchleave]
터치 이벤트 사양에는 한때 사용자의 손가락이 요소 안팎으로 움직일 때 트리거되는 touchenter 및 touchleave 이벤트가 포함되어 있었습니다. 그러나 이 두 가지 사건은 결코 실현되지 않았습니다. Microsoft에는 이 두 가지 이벤트에 대한 대체 이벤트가 있지만 IE에서만 지원됩니다. 어떤 경우에는 사용자의 손가락이 요소 안팎으로 미끄러지는지 아는 것이 매우 유용하므로 이 두 이벤트가 표준으로 돌아올 수 있기를 바랍니다
터치 이벤트에서 일반적으로 사용되는 세 가지 이벤트는 touchstart, touchumove 및 touchend입니다. 이벤트와 마우스 이벤트의 대응은 다음과 같습니다
鼠标 触摸 mousedown touchstart mousemove touchmove mouseup touchend
[참고] 크롬 시뮬레이터의 일부 터치 이벤트 버전은 DOM0 레벨 이벤트 핸들러를 사용하여 유효하지 않은 이벤트를 추가합니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test{height:200px;width:200px;background:lightblue;}
</style>
</head>
<body>
<p id="test"></p>
<script>
(function(){
var
stateMap = {
touchstart_index : 0,
touchmove_index : 0,
touchend_index : 0
},
elesMap = {
touch_obj: document.getElementById('test')
},
showIndex, handleTouch;
showIndex = function ( type ) {
elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']);
};
handleTouch = function ( event ) {
showIndex( event.type );
};
elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);});
})();
</script>
</body>
</html>300ms
300ms 문제 해당 기능을 수행하는 요소와 터치 이벤트를 실행하는 것 사이에는 300밀리초의 간격이 있습니다. 터치 이벤트와 비교하면 마우스 이벤트, 포커스 이벤트, 브라우저 기본 동작 등은 모두 300ms의 지연이 있습니다
【클릭 연결】
300ms가 존재하므로 일반적인 클릭 통과 문제가 발생합니다. 먼저 예제를 살펴보겠습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
</style>
</head>
<body>
<a href="https://baidu.com">百度</a>
<p id="test"></p>
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
fnHide();
};
elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);});
})();
</script>
</body>
</html>하늘색 반투명 p를 클릭한 후(터치 이벤트 트리거), 클릭 위치가 링크 바로 위에 있으면 링크 점프의 기본 동작이 트리거됩니다. 자세한 설명은 페이지를 클릭하면 브라우저가 클릭한 페이지의 좌표를 기록하고 300ms 후에 이 좌표에서 요소를 찾을 수 있다는 것입니다. 이 요소에 대한 클릭 동작을 트리거합니다. 따라서 동일한 페이지 좌표의 상위 요소가 300ms 이내에 사라지면 300ms 후에 하위 요소에 클릭 동작이 발생합니다. 이로 인해 클릭연결 문제가 발생합니다
이 문제는 화면을 터치하는 동작이 과부하되어 발생합니다. 손가락이 화면을 터치하는 순간 브라우저는 사용자가 탭하는지, 두 번 탭하는지, 슬라이딩하는지, 홀딩하는지 또는 기타 다른 작업을 하는지 예측할 수 없습니다. 유일하게 안전한 방법은 잠시 기다렸다가 다음에 무슨 일이 일어나는지 지켜보는 것입니다
문제는 두 번 탭하는 것입니다. 브라우저가 손가락이 화면에서 떨어진 것을 감지하더라도 다음에 무엇을 해야 할지 알 수 없습니다. 브라우저는 손가락이 다시 화면으로 돌아올지, 탭 이벤트와 이벤트 캐스케이드 트리거가 종료될지 알 수 없기 때문입니다. 이를 확인하려면 브라우저가 잠시 기다려야 합니다. 브라우저 개발자가 찾은 최적의 시간 간격은 300밀리초
【해결책】
1. 터치 이벤트의 이벤트 핸들러에 300ms 지연을 추가하세요
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
setTimeout(function(){
fnHide();
},300);
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();2. 300ms 전환 효과를 추가하려면 이징 애니메이션을 사용하세요. 표시 속성은 전환을 사용할 수 없습니다
3. 중간 레이어에 dom 요소를 추가하고 중간 레이어에서 침투 이벤트를 허용한 후 나중에 숨깁니다
4. 상위 레벨과 하위 레벨 모두 탭 이벤트를 사용하지만 기본 동작은 불가피합니다
5. 문서의 터치스타트 이벤트에서 기본 동작을 방지합니다.
document.addEventListener('touchstart',function(e){
e.preventDefault();
})다음으로 a 태그의 점프 동작을 추가하세요
a.addEventListener('touchstart',function(){
window.location.href = 'https://cnblogs.com';
})그러나 이 방법에는 페이지를 스크롤할 수 없거나 텍스트를 선택할 수 없는 등의 부작용이 있습니다. 요소의 텍스트 선택 동작을 복원해야 하는 경우 버블링 방지를 사용하여 복원할 수 있습니다
el.addEventListener('touchstart',function(e){
e.stopPropagation();
})Event object
【기본 정보】
각 터치 이벤트의 이벤트 객체는 공통 속성에 제공됩니다. 마우스 이벤트에는 이벤트 유형, 이벤트 대상 객체, 이벤트 버블링, 이벤트 흐름, 기본 동작 등이 포함됩니다.
터치스타트를 예로 들면 샘플 코드는 다음과 같습니다.
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
console.log(e)
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();
</script>1 currentTarget 속성은 다음과 같습니다. 이벤트가 실행 중입니다.
2 대상 속성은 이벤트
3의 실제 대상 노드를 반환합니다. srcElement 속성은 대상 속성
//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
4와 동일한 기능을 갖습니다. 현재 이벤트가 위치한 이벤트 흐름 단계를 나타냅니다. 0은 이벤트가 발생하지 않았음을 나타내고, 1은 캡처 단계를 나타내고, 2는 대상 단계를 나타내고, 3은 버블링 단계를 나타냅니다. 5. bubble 속성은 현재 이벤트가 버블링되는지 여부를 나타내는 부울 값을 반환합니다. 이 속성은 읽기 전용 속성입니다.
6. cancelable 속성은 이벤트를 취소할 수 있는지 여부를 나타내는 부울 값을 반환합니다. 이 속성은 읽기 전용입니다
//事件流 eventPhase: 2 //可冒泡 bubbles: true //默认事件可取消 cancelable: true
【touchList】
除了常见的DOM属性外，触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组
1、touches：当前触摸屏幕的触摸点数组（至少有一个触摸在事件目标元素上）
2、changedTouches ：导致触摸事件被触发的触摸点数组
3、targetTouches：事件目标元素上的触摸点数组
如果用户最后一个手指离开屏幕触发touchend事件，这最后一个触摸点信息不会出现在targetTouches和touches数组中，但是会出现在changedTouched数组中。因为是它的离开触发了touchend事件，所以changedTouches数组中仍然包含它。上面三个数组中，最常用的是changedTouches数组
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
elesMap.touchObj.innerHTML = 'touches:' + e.touches.length
+ '<br>changedTouches:' + e.changedTouches.length
+ '<br>targetTouches:' + e.targetTouches.length;
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();【事件坐标】
上面这些触摸点数组中的元素可以像普通数组那样用数字索引。数组中的元素包含了触摸点的有用信息，尤其是坐标信息。每个Touch对象包含下列属性
clientx:触摸目标在视口中的x坐标 clientY:触摸目标在视口中的y坐标 identifier:标识触摸的唯一ID pageX:触摸目标在页面中的x坐标（包含滚动） pageY:触摸目标在页面中的y坐标（包含滚动） screenX:触摸目标在屏幕中的x坐标 screenY:触摸目标在屏幕中的y坐标 target:触摸的DOM节点目标
changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象(通常这个触摸点数组不包含其他对象)。这个触摸点对象含有clientX/Y和pageX/Y坐标信息。除此之外还有screenX/Y和x/y，这些坐标在浏览器间不太一致，不建议使用
clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对于布局视口的左上角。布局视口是可以滚动的
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
var touch = e.changedTouches[0];
elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY
+ '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY
+ '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中使用$http实现异步上传Excel文件方法
위 내용은 모바일 웹 개발의 터치 이벤트(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7518
15
1378
52
81
11
53
19
21
68
appdata 폴더를 D 드라이브로 옮길 수 있나요?
Feb 18, 2024 pm 01:20 PM
appdata 폴더를 D 드라이브로 이동할 수 있나요? 컴퓨터 사용이 늘어나면서 점점 더 많은 사용자의 개인 데이터와 애플리케이션이 컴퓨터에 저장됩니다. Windows 운영 체제에는 사용자의 애플리케이션 데이터를 저장하는 데 사용되는 appdata 폴더라는 특정 폴더가 있습니다. 많은 사용자들은 데이터 관리 및 보안 고려 사항을 위해 이 폴더를 D 드라이브나 다른 디스크로 이동할 수 있는지 궁금해합니다. 이번 글에서는 이 문제에 대해 논의하고 몇 가지 해결책을 제시하겠습니다. 먼저, 나에게
Python 웹 개발 프레임워크 비교: Django vs Flask vs FastAPI
Sep 28, 2023 am 09:18 AM
Python 웹 개발 프레임워크 비교: DjangovsFlaskvsFastAPI 소개: 널리 사용되는 프로그래밍 언어인 Python에는 선택할 수 있는 뛰어난 웹 개발 프레임워크가 많이 있습니다. 이 기사에서는 세 가지 인기 있는 Python 웹 프레임워크인 Django, Flask 및 FastAPI를 비교하는 데 중점을 둘 것입니다. 기능, 사용 시나리오 및 코드 예제를 비교함으로써 독자가 자신의 프로젝트 요구 사항에 맞는 프레임워크를 더 잘 선택할 수 있습니다. 1. 장고
6000mAh 실리콘 음극 배터리! Xiaomi 15Pro 업그레이드가 다시 유출되었습니다.
Jul 24, 2024 pm 12:45 PM
7월 23일 뉴스에 따르면 블로거 Digital Chat Station은 Xiaomi 15 Pro의 배터리 용량이 6000mAh로 증가하고 90W 유선 플래시 충전을 지원한다는 소식을 전했습니다. 이는 Xiaomi 디지털 시리즈 중 가장 큰 배터리를 탑재한 Pro 모델이 될 것입니다. Digital Chat Station은 이전에 Xiaomi 15Pro의 배터리가 초고에너지 밀도를 가지며 실리콘 함량이 경쟁 제품보다 훨씬 높다고 밝혔습니다. 2023년 실리콘 기반 배터리가 대규모로 테스트된 후, 2세대 실리콘 양극 배터리가 업계의 미래 발전 방향으로 확인되어 올해 직접 경쟁의 정점을 맞이할 것입니다. 1. 실리콘의 이론적인 그램 용량은 4200mAh/g에 도달할 수 있으며 이는 흑연의 그램 용량의 10배 이상입니다(흑연의 이론적인 그램 용량은 372mAh/g입니다). 음극의 경우 리튬이온 삽입량이 최대에 도달했을 때의 용량이 이론 그램 용량으로 동일 중량 하에서
Windows 11에서 이 PC가 모바일 장치에 액세스하도록 중지하거나 허용하세요.
Feb 19, 2024 am 11:45 AM
Microsoft는 최신 Windows 11 버전에서 PhoneLink의 이름을 MobileDevice로 변경했습니다. 이 변경을 통해 사용자는 프롬프트를 통해 모바일 장치에 대한 컴퓨터 액세스를 제어할 수 있습니다. 이 문서에서는 모바일 장치의 액세스를 허용하거나 거부하는 컴퓨터 설정을 관리하는 방법을 설명합니다. 이 기능을 사용하면 모바일 장치를 구성하고 컴퓨터에 연결하여 문자 메시지를 보내고 받고, 모바일 애플리케이션을 제어하고, 연락처를 보고, 전화를 걸고, 갤러리를 보는 등의 작업을 수행할 수 있습니다. 휴대폰을 PC에 연결하는 것이 좋은 생각입니까? 휴대폰을 Windows PC에 연결하는 것은 편리한 옵션이므로 기능과 미디어를 쉽게 전송할 수 있습니다. 모바일 장치를 사용할 수 없을 때 컴퓨터를 사용해야 하는 사람들에게 유용합니다.
아키텍처 재구상: 웹 애플리케이션 개발에 WordPress 사용
Sep 01, 2023 pm 08:25 PM
이번 시리즈에서는 WordPress를 사용하여 웹 애플리케이션을 구축하는 방법에 대해 설명합니다. 코드를 살펴보는 기술 시리즈는 아니지만 프레임워크, 기본 사항, 디자인 패턴, 아키텍처 등과 같은 주제를 다룹니다. 시리즈의 첫 번째 기사를 읽지 않았다면 추천합니다. 하지만 이 기사의 목적에 따라 이전 기사를 다음과 같이 요약할 수 있습니다. 간단히 말해서, 소프트웨어는 프레임워크 위에 구축될 수 있고, 소프트웨어는 기반을 확장할 수 있습니다. . 간단히 말해서, 우리는 프레임워크와 파운데이션을 구별합니다. 두 용어는 소프트웨어에서 동일한 용어는 아니지만 종종 같은 의미로 사용됩니다. WordPress는 그 자체로 애플리케이션이기 때문에 기초입니다. 그것은 프레임워크가 아닙니다. 이러한 이유로 WordPress의 경우
국내 FPS의 새로운 왕! '델타 작전' 전장이 기대치를 뛰어넘는다
Mar 07, 2024 am 09:37 AM
'오퍼레이션 델타'는 오늘(3월 7일) '코드네임: ZERO'라는 대규모 PC 테스트를 시작한다. 지난 주말 이 게임은 상하이에서 오프라인 플래시몹 체험행사를 진행했는데, 17173도 행운을 빌어 참여하게 됐다. 이번 시험은 지난 시험으로부터 불과 4개월여밖에 남지 않은 상황인데, 이 짧은 시간 안에 '델타 작전'이 어떤 새로운 볼거리와 놀라움을 선사할지 궁금증을 자아낸다. 4개월여 전 오프라인 테이스팅 세션과 첫 번째 베타 버전에서 'Operation Delta'를 경험했습니다. 당시 게임은 '위험한 액션' 모드만 열었습니다. 그러나 델타 작전은 당시로서는 이미 인상적이었습니다. 주요 제조사들이 모바일 게임 시장에 몰려드는 상황에서 국제 표준에 버금가는 FPS
다른 웹 개발 언어에 비해 C++의 장점과 단점은 무엇입니까?
Jun 03, 2024 pm 12:11 PM
웹 개발에서 C++의 장점에는 속도, 성능 및 낮은 수준의 액세스가 포함되지만 제한 사항에는 가파른 학습 곡선 및 메모리 관리 요구 사항이 포함됩니다. 웹 개발 언어를 선택할 때 개발자는 애플리케이션 요구 사항에 따라 C++의 장점과 한계를 고려해야 합니다.
Honor Magic6 RSR Porsche Design 공식 판매 시작, 1TB 가격은 9,999위안
Mar 22, 2024 pm 03:03 PM
최근 Honor Mobile은 신제품 출시 컨퍼런스를 개최하고 Honor Magic6RSR Porsche Design을 공식 출시했습니다. 3월 22일, CNMO는 Honor Magic 6 RSR Porsche Design이 공식적으로 판매용으로 출시되었으며 24GB+1TB 버전만 9,999위안에 판매된다는 사실을 알게 되었습니다. Honor Magic6RSR은 포르쉐 슈퍼 스포츠카의 클래식 요소에서 영감을 받은 포르쉐 디자인 외관을 채택했습니다. 백 라인 디자인은 포르쉐 플라잉 라인 디자인에서 영감을 얻었으며, 카메라 모듈은 아이코닉한 육각형 디자인을 채택해 제품에 차별화된 입체감과 역동적인 느낌을 선사한다. 또한, 제품은 포르쉐 오리지널 마스터들이 컬러 튜닝한 아게이트 그레이, 아이스베리 핑크 2가지 컬러로 출시돼 특유의 디자인 아름다움을 더욱 돋보이게 한다. 화면 기술 측면에서 Honor Magic6RSR은
