標籤：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>觸屏手指滑動計算示範--程式員老劉</title></head><body style="font-size:32px;"><div style="width:100%"><h2>觸屏手指滑動方向計算示範</h2><div id="region" style="background-color:yellow;width:100%;height:50%"></div>起始座標<br/><input id="touchStart" style="font-size: 48px;"/><br/>結果計算<br/><input id="touchMove" style="font-size: 48px;"/></div><script type="text/javascript">/* * 程式員老劉 * 功能：計算手指在指定標籤上的滑動的方向 */ var tagId = "region"; var pressX = 0, pressY = 0; var obj = document.getElementById(tagId); obj.addEventListener(‘touchmove‘, function(event) { // 如果這個元素的位置內只有一個手指的話 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; var spanX = touch.pageX - pressX; var spanY = touch.pageY - pressY; var direct = "none"; if (Math.abs(spanX) > Math.abs(spanY)) { //水平方向 if (spanX > 0) { direct = "right";//向右 //do right function } else { direct = "left";//向左 //do left function } } else { //垂直方向 if (spanY > 0) { direct = "down";//向下 //do down function } else { direct = "up";//向上 //do up function } } // 把元素放在手指所在的位置 touchMove.value = direct + "(" + spanX + ‘;‘ + spanY + ")"; } }, false); obj.addEventListener(‘touchstart‘, function(event) { // 如果這個元素的位置內只有一個手指的話 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 pressX = touch.pageX; pressY = touch.pageY; touchStart.value = pressX + ‘;‘ + pressY; } }, false); /* obj.addEventListener(‘touchend‘, function(event) { // 如果這個元素的位置內只有一個手指的話 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 touchEnd.value=touch.pageX + ‘;‘ + touch.pageY; } }, false); */</script></body></html>
移動端判斷手勢滑動的方向
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
