javascript_javascript 스킬의 Touch 이벤트에 대한 간략한 토론

일반적으로 모바일 단말기의 터치스크린 슬라이딩에 사용되는 js 터치 이벤트

코드 복사 코드는 다음과 같습니다.

$(function(){document.addEventListener("touchmove ", _touch , false);}) 함수 _touch(event){alert(1);}

터치스타트: 손가락이 화면을 터치하면 트리거됩니다. 이미 화면에 손가락이 있어도 트리거됩니다.
touchmove: 손가락이 화면을 미끄러질 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault()를 호출하면 스크롤이 방지됩니다.
touchend: 손가락이 화면에서 제거될 때 트리거됩니다.
touchcancel: 시스템이 터치 추적을 중지하면 시작됩니다. 이 이벤트의 정확한 트리거링 이벤트는 문서에 명확하지 않습니다.

위 이벤트의 이벤트 개체에는 모두 다음과 같은 속성이 있습니다.

터치: 현재 추적되는 터치 작업을 나타내는 Touch 개체의 배열입니다.
targetTouches: 이벤트 대상과 관련된 Touch 객체의 배열입니다.
changeTouches: 마지막 터치 이후 변경된 사항을 나타내는 Touch 개체의 배열입니다.

각 터치 개체에는 다음 속성이 포함되어 있습니다.

clientX: 뷰포트에 있는 터치 대상의 X 좌표입니다.
clientY: 뷰포트에서 터치 대상의 Y 좌표입니다.
식별자: 터치의 고유 ID를 나타냅니다.
pageX: 페이지에 있는 터치 대상의 x 좌표입니다.
pageY: 페이지 내 터치 대상의 y 좌표입니다.
screenX: 화면 터치 대상의 x 좌표입니다.
screenY: 화면 터치 대상의 y 좌표입니다.
대상: 터치된 DOM 노드 좌표

터치이벤트

사양에 나열되어 있고 모바일 장치 전반에 걸쳐 널리 구현되는 세 가지 기본 터치 이벤트:
​ 1. 터치스타트: DOM 요소에 손가락을 올려 놓습니다.
​ 2. 터치무브: 손가락으로 DOM 요소를 드래그합니다.
3. touchend: DOM 요소에서 손가락을 멀리 이동합니다.

각 터치 이벤트에는 세 가지 터치 목록이 포함됩니다.
​ 1. 터치: 현재 화면에 있는 모든 손가락의 목록입니다.
​ 2. targetTouches: 현재 DOM 요소에 위치한 손가락 목록입니다.
3. ChangeTouches: 현재 이벤트에 관련된 손가락 목록

예를 들어 터치엔드 이벤트에서는 제거된 손가락이 됩니다.

이 목록은 터치 정보가 포함된 개체로 구성됩니다.
​ 1. 식별자: 터치 세션에서 현재 손가락을 고유하게 식별하는 숫자 값입니다.
​ 2. target: 액션의 타겟이 되는 DOM 요소입니다.
​ 3. 클라이언트/페이지/화면 좌표: 화면에서 액션이 발생하는 위치입니다.
​ 4. 반경 좌표 및 회전각도 : 손가락 모양과 거의 같은 타원을 그립니다.

터치 지원 애플리케이션

touchstart, touchmove 및 touchend 이벤트는 핀치 줌, 회전 및 대기와 같은 일반적인 멀티 터치 제스처를 포함하여 거의 모든 유형의 터치 기반 상호 작용을 지원할 만큼 풍부한 기능 세트를 제공합니다. 다음 코드를 사용하면 한 손가락 터치를 사용하여 DOM 요소를 드래그할 수 있습니다.

 var obj = document.getElementByIdx_x_x_x_x_x_x('id');
 obj.addEventListener('touchmove', function(event) 
 { // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) 
 {
  var touch = event.targetTouches[0];
   // 把元素放在手指所在的位置
   obj.style.left = touch.pageX + 'px';
     obj.style.top = touch.pageY + 'px';
  }
}, false);

다음은 현재 터치된 지점을 모두 화면에 표시하는 예시입니다. 디바이스의 반응성을 느끼기 위한 것입니다.

   // 设置画布并通过ctx变量来暴露上下文复制代码
 canvas.addEventListener('touchmove',   
 function(event) {
    for (var i = 0; i < event.touches.length; i++) {
 var touch = event.touches;
  ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
   }
  }, false);

데모

Paul Irish와 다른 사람들이 만든 캔버스 기반 페인팅 데모처럼 흥미로운 멀티 터치 데모가 많이 있습니다.

CSS3 전환, 전환 및 캔버스를 사용하는 Fruit Ninja 복제 기술 데모인 Browser Ninja도 있습니다.

모범 사례

블록 줌

기본 멀티 터치 설정은 스와이프 및 제스처가 스크롤 및 확대/축소와 같은 브라우저 동작과 연결되는 경우가 많기 때문에 특히 사용하기가 쉽지 않습니다.

크기 조정을 비활성화하려면 다음 메타 태그를 사용하여 뷰포트가 사용자에게 확장 가능하지 않도록 설정하세요.
Content="width=device-width,initial-scale=1.0, user-scalable=no">
​ ​ 보기 영역 설정에 대한 자세한 내용은 모바일 HTML 5에 대한 이 문서를 확인하세요.

스크롤 방지

일부 모바일 장치에는 스크롤이 콘텐츠 제한을 초과할 때 보기가 튀어오르는 클래식 iOS 오버스크롤 효과와 같은 기본 터치무브 동작이 있습니다. 이러한 방식은 많은 멀티 터치 애플리케이션에서 혼란을 야기하지만 비활성화하는 것은 쉽습니다.

   document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
   }, false); 

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：

  canvas.addEventListener('touchmove', function(event) {
   renderTouches(event.touches);
  },

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：

  var touches = []
  canvas.addEventListener('touchmove', function(event) {
    touches = event.touches;
  }, false);
  // 设置一个每秒60帧的定时器
  timer = setInterval(function() {
   renderTouches(touches);
  }, 15);

     提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches
    要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

    最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。

设备支持     

    遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。

    简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

    规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
      1. touchenter：移动的手指进入一个DOM元素。
      2. toucheleave：移动手指离开一个DOM元素。
      3. touchcancel：触摸被中断（实现规范）。

     被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏览器没有支持radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟触发60次，所有的被测试设备都是这样。