js untuk melaksanakan kemahiran pemantauan_javascript acara skrin sentuh gelongsor

Contoh dalam artikel ini menerangkan cara melaksanakan pemantauan acara skrin sentuh gelongsor dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Peristiwa skrin sentuh gelongsor kiri dan kanan JS terutamanya termasuk tiga acara: touchstart, touchmove dan touchend. Atribut yang paling penting bagi ketiga-tiga peristiwa ini ialah pageX dan pageY, yang mewakili koordinat X dan Y.

mula sentuh mencetuskan acara apabila sentuhan bermula

sentuhan mencetuskan acara apabila sentuhan tamat

Peristiwa gerakan sentuh agak pelik, secara logiknya, acara ini harus dicetuskan secara berterusan semasa proses sentuhan Walau bagaimanapun, dalam Android 1.5 saya, ia dicetuskan sekali selepas permulaan sentuh dihidupkan, dan selebihnya dinyalakan hampir pada masa yang sama. masa sebagai sentuhan.

Ketiga-tiga acara ini mempunyai atribut timeStamp, anda boleh melihat bahawa pesanannya ialah touchstart ->touchmove ->

Berikut ialah contoh kod:

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. Acara sentuh dan acara klik tidak akan dicetuskan pada masa yang sama. Peranti mudah alih hari ini lebih baik dan telah mengelakkan sepenuhnya masalah ini.

2. Perhatikan anjakan kedudukan permulaan dan akhir sentuhan. Jika anjakan terlalu kecil, tiada tindakan perlu diambil.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.