js implements a sliding touch screen event monitoring method

  • 2020-06-03 05:54:59
  • OfStack

An example of js is presented in this paper. Share to everybody for everybody reference. Specific implementation methods are 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 and right sliding touch screen events, there are mainly three events: touchstart, touchmove, touchend. The most important properties of these three events are pageX and pageY, which represent the X,Y coordinates.

touchstart triggers an event at the beginning of a touch

touchend triggers an event at the end of a touch

touchmove is a strange event, it would be right to excite it as you touch it, but in my Android 1.5, I fired it once after touchstart, and then the rest were fired at about the same time as touchend.

Each of these three events has an timeStamp attribute. Looking at the timeStamp attribute, you can see that the order is touchstart - > touchmove - > touchmove - > ... - > touchmove - > touchend.

Here 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 event and click event will not be triggered simultaneously. Today's mobile devices do a better job of avoiding this problem perfectly.

2. Note the displacement at the beginning and end of the touch. If the displacement is too small, no action should be taken.

PS: Here is another online tool about JS events, which summarizes the common event types and functions of JS:

javascript Event and Function Description:

http://tools.ofstack.com/table/javascript_event

I hope this article has been helpful for your javascript programming.


Related articles: