Js method for implementing sliding touch screen event listening _ javascript skills

This article mainly introduces how js monitors sliding touch screen events. It is very useful for Mobile Phone Touch Screen sliding events, for more information about how to monitor a sliding touch screen event in js, see the example in this article. Share it with you 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(); });}

Js's left-right sliding touch screen event mainly involves 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 the touch starts.

Touchend triggers an event when the touch ends

Touchmove is a strange event. It is true that this event is continuously triggered during touch, but in Android 1.5, It is triggered once after touchstart is triggered, then all the remaining values are triggered at the same time as touchend.

All three events have a timeStamp attribute. Check the timeStamp attribute. You can see that the order is touchstart-> 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;});

PS:
1. touch and click events are not triggered at the same time. The current mobile devices are doing well 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 help you design javascript programs.