Javascript-based touch mobile touch screen sliding Event _ javascript skills

Before describing the touch event, you must first describe the specific touch objects in the multi-touch system (similar objects are simulated in android, iOS, and nokia's latest meego system ). This object encapsulates a screen touch, usually from the finger. It is generated when the touch event is triggered. You can use the toucheventhandler event object to get the mobile terminal touch screen sliding effect, which is actually image carousel, which is well implemented on PC pages, bind the click and mouseover events. However, to achieve this carousel effect on mobile devices, the core touch event is required. Processing touch events can track every finger that slides on the screen.

The following are four touch events:
Touchstart: // triggered when the finger is placed on the screen
Touchmove: // triggered by sliding fingers on the screen
Touchend: // triggered when the finger leaves the screen
Touchcancel: // triggered when the system cancels the touch event. This seems to be less useful.

After each touch event is triggered, an event object is generated. The event object includes the following three additional touch lists:

Touches: // list of all fingers on the current screen
TargetTouches: // The Finger list on the current dom element. Use this instead of touches.
ChangedTouches: // The list of fingers involved in the current event. Use this instead of touches.
Each touch in these lists is composed of touch objects, which contain touch information. The main attributes are as follows:
ClientX/clientY: // The Position of the touch point relative to the browser window
PageX/pageY: // The Position of the touch point relative to the page
ScreenX/screenY: // position of the touch point relative to the screen
Identifier: // the ID of the touch object
Target: // The current DOM Element

Note:

When the finger slides the entire screen, it will affect the browser's behavior, such as scrolling and scaling. Therefore, when calling the touch event, you must disable scaling and scrolling.

1. Disable Scaling
Set the meta tag.

2. Do not scroll
PreventDefault is to prevent default behaviors, and the default behavior of touch events is to scroll.
Event. preventDefault ();

Use Case:

 Mobile Terminal touch slide
 
 
 
 

 
 

  
  
The 20140813 mirror world, after all, is just a reflection. You can see your figure, but you cannot touch your future.
  
  
20140812 xilinhot's trip to S101 is a very beautiful railway. Below the railway is a small salt marsh, a faint sense of the sky. It is a pity that I didn't see a train passing by for an hour, so I had to continue to rush to dongwuqi.
  
  
Why is the color of 20140811 water so blue? I wonder, it's the color of natural saturation and contrast.
  
  
Ocean Planet 3 Chongqing is so hot that I want to sleep
  
  
The above works come from two designers as the viewer. can you differentiate them by design style?
 
 
12345
Script var slider ={// determines whether the device supports touch events: ('ontouchstart' in window) | window. documentTouch & document instanceof DocumentTouch, slider: document. getElementById ('slider'), // Event events: {index: 0, // display the index slider of the element: this. slider, // this is the slider object icons: document. getElementById ('icons'), icon: this. icons. getElementsByTagName ('span '), handleEvent: function (event) {var self = this; // this indicates the events object if (event. type =' Touchstart') {self. start (event);} else if (event. type = 'touchmove ') {self. move (event);} else if (event. type = 'touchend') {self. end (event) ;}, // slide start: function (event) {var touch = event.tar getTouches [0]; // The touches array object obtains all the touch on the screen, take the first touchstartPos = {x: touch. pageX, y: touch. pageY, time: + new Date}; // take the coordinate value isScrolling = 0 of the first touch; // this parameter determines whether it is vertical or horizontal. slider. addEventListener ('touchmove ', this, false); t His. slider. addEventListener ('touchend', this, false);}, // move: function (event) {// when multiple touch pages on the screen are scaled, moveoperation if(event.tar getTouches. length> 1 | event. scale & event. scale! = 1) return; var touch = event.tar getTouches [0]; endPos = {x: touch. pageX-startPos. x, y: touch. pageY-startPos. y}; isScrolling = Math. abs (endPos. x) <Math. abs (endPos. y )? 1:0; // if isScrolling is 1, it indicates vertical sliding. if (isScrolling = 0) {event. preventDefault (); // block the default action of a touch event, that is, block scrolling this. slider. className = 'cnt '; this. slider. style. left =-this. index * 600 + endPos. x + 'px ';}}, // slide to release end: function (event) {var duration = + new Date-startPos. time; // sliding duration if (isScrolling = 0) {// this when horizontal scrolling. icon [this. index]. className = ''; if (Number (duration)> 10) {// determines whether to move left or right. if the offset is greater than 10, run if (endPos. x> 10) {if (this. index! = 0) this. index-= 1;} else if (endPos. x <-10) {if (this. index! = This. icon. length-1) this. index + = 1 ;}} this. icon [this. index]. className = 'curr'; this. slider. className = 'cnt f-anim '; this. slider. style. left =-this. index * 600 + 'px ';} // unbind event this. slider. removeEventListener ('touchmove ', this, false); this. slider. removeEventListener ('touchend', this, false) ;}}, // initialize init: function () {var self = this; // this indicates the slider object if (!! Self. touch) self. slider. addEventListener ('touchstart', self. events, false); // The second addEventListener parameter can be used to upload an object and call the handleEvent attribute of the object. init (); script

The above is all the content of this article. I hope you will like it.