The method of realizing the sliding touch-screen event monitoring by JS _javascript skill

This article illustrates the method of JS realization of sliding touch screen event monitoring. Share to everyone for your reference. The 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 left and right sliding touch screen events, there are three main events: Touchstart,touchmove,touchend. The most important properties of these three events are Pagex and Pagey, which represent x,y coordinates.

Touchstart triggers an event when the touch starts

Touchend triggers the event at the end of the touch

Touchmove This event is odd, and it is true that the event is constantly being stimulated during the touch, but in my Android 1.5, it fires once after the touchstart excitation, and the rest is excited almost simultaneously with Touchend.

Each of these three events has a TimeStamp attribute that looks at the TimeStamp property, and you can see that the order is Touchstart-> touchmove->touchmove-> ...-> touchmove Uchend.

Here's 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 events and click events are not triggered at the same time. Now the mobile device is doing a better job, has been the problem to avoid the perfect.

2. Note the position of the start and end of the touch. If the displacement is too small should not do any action.

PS: Here again for you to provide a JS event on the online tool, summed up the JS commonly used event types and function functions:

JavaScript event and Feature description encyclopedia:

Http://tools.jb51.net/table/javascript_event

I hope this article will help you with your JavaScript programming.