client/clienty://the location of the touch point relative to the browser window viewport
pagex/pagey://the position of the touch point relative to the page
screenx/screeny://the position of the touch point relative to the screen
Identifier://Unique ID of touch object
Event.preventdefault ();// block browser default events, important
Touchstart: Trigger When the finger is placed on the screen
Touchmove://Trigger when the finger moves on the screen
Touchend://Trigger when finger is picked up from the screen
Touchcancel://The system triggers when the touch event is canceled. As to when the system will be canceled, unknown.
<div style= ' height:500px;width:100%; border:1px solid #000; ' id= ' canvas ' >
<script>
var canvas = document.getElementById (' canvas ');
function Touchstart (event) {
Event.preventdefault ();
Alert (123)
}
function TouchMove (event) {
Event.preventdefault ();
Alert (456)
}
function Touchend (event) {
Event.preventdefault ();
Alert (789)
}
Canvas.addeventlistener ("Touchstart", Touchstart, false);
Canvas.addeventlistener ("Touchmove", Touchmove, false);
Canvas.addeventlistener ("Touchend", Touchend, false);
Canvas.addeventlistener ("Touchcancel", Touchcancel, false);
</script>
EG:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> New Document </title>
<meta charset= "gb2312"/>
<meta id= "viewport" name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
<meta name= "mobileoptimized" content= ">"
<meta name= "format-detection" content= "Telephone=no" >
<link rel= "Apple-touch-icon" href= "Touch-icon-iphone.png"/>
<link rel= "Apple-touch-icon" sizes= "72x72" href= "Touch-icon-ipad.png"/>
<link rel= "Apple-touch-icon" sizes= "114x114" href= "Touch-icon-iphone4.png"/>
<style>
*{padding:0px;margin:0px; text-align:center;}
. Spirit {/* box's class name */
Position:absolute;
width:50px;
height:50px;
}
</style>
<body>
<div id= "id" style= "position:fixed;width:50px;height:50px; </div>
<script>
/* Single Finger drag */
var obj = document.getElementById (' id ');
Obj.addeventlistener (' Touchmove ', function (event) {
If there's only one finger in the position of this element,
if (event.targetTouches.length = = 1) {
Event.preventdefault ();//block browser default events, important
var touch = event.targettouches[0];
Place the element where the finger is located
Obj.style.left = touch.pagex-25 + ' px ';
Obj.style.top = touch.pagey-25 + ' px ';
}
}, False);
</script>
</body>
Phone-side 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
