A method of realizing sliding touch screen event monitoring with JS

This article mainly introduces JS implementation of sliding touch screen event monitoring method, suitable for mobile phone touch screen sliding event monitoring skills, very practical value, the need for friends can refer to the

This paper illustrates the method of JS to realize the monitoring of sliding touch screen event. Share to everyone for your reference. The implementation methods are as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

function Span_move_fun () {var span = document.getElementById ("Move_k"); var span_left = $ (span). Offset (). Left; var span_t OP = $ (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.to p = 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:

?

1 2 3 4 5 6 7 8

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.

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

Note < > : More Wonderful tutorials please focus on Triple programming