Home > Developer > Web Develop
First on the instance code:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="Width=device-width, initial-scale=1.0 "> <title>Touch</title> <style type="Text/css"> Body{ height: %; margin: 0; padding: 0; } #canvas{ position: relative; width: %; Height: + px; } . Spirit {/ * box's class name */position: absolute; width: px; height: px; background-color: red; } </style></head><body> <div id="Canvas"></div> <script type="Text/javascript"> varCanvas=document.getelementbyid ("Canvas");varSpirit,startx,starty;//Touch Start listener function touchstart(event) {Event.preventdefault ();if(Spirit | |! event.touches.length)return;varTouch = event.touches[0]; StartX = Touch.pagex; Starty = Touch.pagey; Spirit = Document.createelement ("Div"); Spirit.classname ="Spirit"; Spirit.style.left = startx+"px"; Spirit.style.top = starty+"px"; Canvas.appendchild (spirit); Console.log (StartX); }//Add touch Start listenerCanvas.addeventlistener ("Touchstart", Touchstart,false); function touchMove(event) {Event.preventdefault ();if(!spirit | |!event.touches.length)return;varTouch = event.touches[0];varx = Touch.pagex-startx;vary = Touch.pagey-starty; Spirit.style.webkitTransform =' Translate ('+x+' px, '+y+' px '); Console.log (2); } canvas.addeventlistener ("Touchmove", TouchMove,false); function touchend(event){ if(!spirit)return; Canvas.removechild (spirit); spirit=NULL} canvas.addeventlistener ("Touchend", Touchend,false);</script></body></html>At run time, a red square appears at the touch, following the mouse slide
Knowledge Points:
Handling Touch events allows you to track the location of each finger of the user. You can bind the following four kinds of touch events:
touchstart // 手指放到屏幕上的时候触发 touchmove // 手指在屏幕上移动的时候触发 touchend // 手指从屏幕上拿起的时候触发 touchcancel // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。
Before you begin to describe the touch event, you need to describe the touch objects that are unique to your multi-touch system (Android and iOS and even Nokia's latest
The Meego system simulates a similar object, only for iOS, because I only have the ipad available for testing. ）。 This object encapsulates a single
Screen touch, usually from the finger. It is generated when the touch event is triggered and can be taken from the event object of the touch events handler
(typically through the Event.changedtouches property). This object includes some important attributes:
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 // touch对象的unique ID
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JS Touch Event Touch
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
