슬라이딩 터치스크린 이벤트 모니터링_javascript 기술을 구현하는 js 메소드

이 글의 예시에서는 js에서 슬라이딩 터치스크린 이벤트 모니터링을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

function span_move_fun(){
 var span = document.getElementById("move_k");
 var span_left = $(span).offset().left;
 var span_top = $(span).offset().top;
 var start_left = $(span).offset().left;
 var start_top = $(span).offset().top;
 span.addEventListener('touchstart', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
     var touch = event.targetTouches[0];
     span.style.position = "absolute";
  span_top = $(this).offset().top;
  span_left = $(this).offset().left;
  start_top = touch.pageY
  start_left = touch.pageX
     var left = parseFloat(touch.pageX - start_left + span_left-30);
     var top = parseFloat(touch.pageY - start_top + span_top-73);
  span.style.left = String(left) + 'px';
  span.style.top = String(top) + 'px';
     }
   });
   span.addEventListener('touchmove', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
  var touch = event.targetTouches[0];
  span.style.position = "absolute";
  var left = parseFloat(touch.pageX - start_left + span_left-30);
     var top = parseFloat(touch.pageY - start_top + span_top-73);
  span.style.left = String(left) + 'px';
  span.style.top = String(top) + 'px';
  }
 });
   span.addEventListener('touchend', function(event) {
   var touch = event.changedTouches[0];
   if(parseFloat(touch.pageX - start_left + span_left-30) <= -5 || parseFloat(touch.pageX - start_left + span_left-30) >= 620 || parseFloat(touch.pageY - start_top + span_top-73) <= -38 || parseFloat(touch.pageY - start_top + span_top-73) >= 587){
    span.style.left = String(span_left-30) + 'px';
  span.style.top = String(span_top-73) + 'px';
   }
  event.stopPropagation();
 });
}

JS의 좌우 슬라이딩 터치스크린 이벤트는 크게 touchstart, touchmove, touchend 3가지 이벤트로 구성됩니다. 이 세 가지 이벤트의 가장 중요한 속성은 X 및 Y 좌표를 나타내는 pageX 및 pageY입니다.

touchstart는 터치가 시작될 때 이벤트를 트리거합니다

touchend는 터치가 끝나면 이벤트를 트리거합니다

touchmove 이벤트는 좀 이상합니다. 논리적으로 말하면 이 이벤트는 터치 프로세스 중에 계속해서 발생해야 합니다. 그런데 제 안드로이드 1.5에서는 터치스타트가 발생한 후 한 번만 발생하고 나머지는 거의 동시에 발생합니다. 터치엔드로서의 시간.

이 세 가지 이벤트에는 모두 timeStamp 속성이 있으며, 순서는 touchstart -> touchmove -> … -> touchend입니다.

다음은 코드 예시입니다.

document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function(e){
    nStartY = e.targetTouches[0].pageY;
    nStartX = e.targetTouches[0].pageX;
});
document.getElementsByTagName_r('body')[0].addEventListener('touchend',function(e){
    nChangY = e.changedTouches[0].pageY;
    nChangX = e.changedTouches[0].pageX;
});

추신:
1. 터치 이벤트와 클릭 이벤트는 동시에 발생하지 않습니다. 오늘날의 모바일 장치는 성능이 향상되어 이 문제를 완전히 피할 수 있습니다.

2. 터치의 시작 위치와 끝 위치 이동에 주의하세요. 변위가 너무 작으면 아무런 조치도 취하지 않아야 합니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.