js method to implement sliding touch screen event monitoring

js method to implement sliding touch screen event monitoring_javascript skills

WBOY

Release： 2016-05-16 16:00:54

Original

1399 people have browsed it

The example in this article describes how to implement sliding touch screen event monitoring in js. Share it with everyone for your reference. The specific implementation method is as follows:

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

Copy after login

JS’s left and right sliding touch screen events mainly include three events: touchstart, touchmove, and touchend. The most important attributes of these three events are pageX and pageY, which represent the X and Y coordinates.

touchstart triggers an event when a touch starts

touchend triggers an event when the touch ends

The touchmove event is rather strange. Logically speaking, this event should be fired continuously during the touch process. However, in my Android 1.5, it is fired once after touchstart is fired, and then the rest are fired almost at the same time as touchend.

These three events all have a timeStamp attribute. Looking at the timeStamp attribute, you can see that the order is touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend.

The following is a code example:

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

Copy after login

PS:
1. The touch event and click event will not be triggered at the same time. Today’s mobile devices are better and have completely avoided this problem.

2. Pay attention to the displacement of the start and end positions of the touch. If the displacement is too small, no action should be taken.

I hope this article will be helpful to everyone’s JavaScript programming design.