모바일 웹 개발의 터치 이벤트(자세한 튜토리얼)
- 亚连원래의
- 2018-06-11 16:42:131934검색
이제 모바일 웹 개발에서의 터치 이벤트 예시에 대해 자세히 설명하겠습니다. 참고할 가치가 충분하고 모든 분들께 도움이 되기를 바랍니다.
이전 단어
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!