méthode js pour implémenter les compétences de surveillance des événements sur écran tactile coulissant_javascript

L'exemple de cet article décrit comment implémenter la surveillance des événements sur écran tactile coulissant dans js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

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();
 });
}

Les événements d'écran tactile coulissant gauche et droit de JS comprennent principalement trois événements : touchstart, touchmove et touchend. Les attributs les plus importants de ces trois événements sont pageX et pageY, qui représentent les coordonnées X et Y.

touchstart déclenche un événement lorsqu'un toucher démarre

touchend déclenche un événement à la fin du contact

L'événement touchmove est plutôt étrange. Logiquement parlant, cet événement devrait être déclenché en continu pendant le processus tactile. Cependant, dans mon Android 1.5, il est déclenché une fois après le déclenchement de touchstart, puis les autres sont déclenchés presque en même temps. temps comme touche.

Ces trois événements ont tous un attribut timeStamp. En regardant l'attribut timeStamp, vous pouvez voir que l'ordre est touchstart -> touchmove ->touchmove -> … ->

Ce qui suit est un exemple de code :

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;
});

PS :
1. L’événement tactile et l’événement clic ne seront pas déclenchés en même temps. Les appareils mobiles d’aujourd’hui sont meilleurs et ont complètement évité ce problème.

2. Faites attention au déplacement des positions de début et de fin du toucher. Si le déplacement est trop faible, aucune mesure ne doit être prise.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.