支援 IOS Android Ipad 等不同作業系統的手持或平板裝置 代碼如下：一、index.html<html><title>手指觸摸事件</title><head><style type="text/css">#touchable{height: 75px;width: 197px;background-color: #0033CC;color: #FFCC66;text-align: center;}#output{height: 200px;width: 200px;}</style></head><script src="javascript/hzTouch.js" type="text/javascript"></script><body><div id='touchable' class="style2"><b><br /><span class="style1"><br />用來判斷上下移動</span></b></div> <br/><textarea id="output" ></textarea> <script> //觸摸後回調方法//第一觸點開始X座標,第一觸點開始Y座標,第一觸點結束X座標,第一觸點結束Y座標,//第二觸點開始X座標,第二觸點開始Y座標,第二觸點結束X座標,第二觸點結束Y座標,//觸摸類型，觸摸值(如果是移動就是移動距離，如果是縮放則是縮放比)function myCallBack(FirstStartX, FirstStartY, FirstEndX, FirstEndY,SecondStartX, SecondStartY, SecondEndX, SecondEndY,mTouchType, TouchValue) {var output = document.getElementById("output");output.innerHTML = "第一觸點開始：" + FirstStartX + ":" + FirstStartY + "\n";output.innerHTML += "第一觸點結束：" + FirstEndY + ":" + FirstEndY + "\n";switch (mTouchType) {case TouchType.Up:output.innerHTML += "向上移動了：" + TouchValue + "\n";break;case TouchType.Down:output.innerHTML += "向下移動了：" + TouchValue + "\n";break;case TouchType.Left:output.innerHTML += "向左移動了：" + TouchValue + "\n";break;case TouchType.Right:output.innerHTML += "向右移動了：" + TouchValue + "\n";break;case TouchType.Zoom:output.innerHTML += "第二觸點開始：" + SecondStartX + ":" + SecondStartY + "\n";output.innerHTML += "第二觸點結束：" + SecondEndX + ":" + SecondEndY + "\n";output.innerHTML += "縮放比例是：" + TouchValue + "\n";break;default:break;}}//建立指定DOM對象的觸摸對象var testTouch = new YXMTouch('touchable', 200, "output", false, myCallBack); </script> </body></html> 二、hzTouch.jsvar meta = document.createElement('meta');meta.setAttribute('name', 'HandheldFriendly');meta.setAttribute('content', 'True');document.getElementsByTagName('head')[0].appendChild(meta); meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');document.getElementsByTagName('head')[0].appendChild(meta); meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width');document.getElementsByTagName('head')[0].appendChild(meta); var TouchType ={Up: 1,Down: 2,Left: 3,Right: 4,Zoom: 5} function documentTouchEvent(event) {//只跟蹤一次觸摸if (event.touches.length == 1) {switch (event.type) {case "touchstart":event.preventDefault(); //阻止滾動break;case "touchend":event.preventDefault(); //阻止滾動break;case "touchmove":event.preventDefault(); //阻止滾動break;}}} document.addEventListener("touchstart", documentTouchEvent, false);document.addEventListener("touchend", documentTouchEvent, false);document.addEventListener("touchmove", documentTouchEvent, false); //計算兩座標直線距離function CoordinateDistance(x1, y1, x2, y2) {return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));} //計算縮放比function Scaling(x1, y1, x2, y2, x3, y3, x4, y4) {return (CoordinateDistance(x2, y2, x4, y4) / CoordinateDistance(x1, y1, x3, y3)).toFixed(2);} function YXMTouch(TouchObjId, MinDelay, LogObjId, IsLog, CallBack) {var minTime = MinDelay;var startTime = 0;var SX = 0;var SY = 0;var EX = 0;var EY = 0;var SX1 = 0;var SY1 = 0;var EX1 = 0;var EY1 = 0;var output = document.getElementById(LogObjId);var isLog = IsLog == null ? false : IsLog; function handleTouchEvent(event) {switch (event.type) {case "touchstart":SX = event.touches[0].clientX;SY = event.touches[0].clientY;if (this.isLog)output.innerHTML = "觸摸開始0 (" + SX + "," + SY + ")" + "\n";try {SX1 = event.touches[1].clientX;SY1 = event.touches[1].clientY;if (this.isLog)output.innerHTML = "觸摸開始1 (" + SX1 + "," + SY1 + ")" + "\n";}catch (err) { }startTime = event.timeStamp; break;case "touchend":startTime = 0;if (this.isLog)output.innerHTML += "觸摸結束 (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")" + "\n";break;case "touchmove":var str = "";event.preventDefault();var currentTime = event.timeStamp;if (startTime !== 0 && currentTime - startTime > minTime) {EX = event.changedTouches[0].clientX;EY = event.changedTouches[0].clientY;try {EX1 = event.touches[1].clientX;EY1 = event.touches[1].clientY;}catch (err) { }CallBackTouchEnd();}break;}} function CallBackTouchEnd() {startTime = 0;startX = 0;var mTouchType;var mValue; if ((SX1 !== 0) && (SY1 !== 0) && (EX1 !== 0) && (EY1 !== 0)) {mTouchType = TouchType.Zoom;mValue = Scaling(SX, SY, EX, EY, SX1, SY1, EX1, EY1);}else {var DiffY = Math.abs(EY - SY);var DiffX = Math.abs(EX - SX);if (DiffY >= DiffX) {mValue = DiffY;if (EY >= SY)mTouchType = TouchType.Down;elsemTouchType = TouchType.Up;}else {mValue = DiffX;if (EX >= SX)mTouchType = TouchType.Right;elsemTouchType = TouchType.Left; }} if (this.isLog) {output.innerHTML += "開始：" + SX + ":" + SY + "\n";output.innerHTML += "結束：" + EX + ":" + EY + "\n";switch(mTouchType){case TouchType.Up:output.innerHTML += "向上移動了：" + mValue + "\n";break;case TouchType.Down:output.innerHTML += "向下移動了：" + mValue + "\n";break;case TouchType.Left:output.innerHTML += "向左移動了：" + mValue + "\n";break;case TouchType.Right:output.innerHTML += "向右移動了：" + mValue + "\n";break;case TouchType.Zoom:output.innerHTML += "開始1：" + SX1 + ":" + SY1 + "\n";output.innerHTML += "結束1：" + EX1 + ":" + EY1 + "\n";output.innerHTML += "縮放比例是：" + mValue + "\n";break;default:break;}} CallBack(SX, SY, EX, EY, SX1, SY1, EX1, EY1, mTouchType, mValue);SX = 0; SY = 0; EX = 0; EY = 0;SX1 = 0; SY1 = 0; EX1 = 0; EY1 = 0;} document.getElementById(TouchObjId).addEventListener("touchstart", handleTouchEvent, false);document.getElementById(TouchObjId).addEventListener("touchmove", handleTouchEvent, false);document.getElementById(TouchObjId).addEventListener("touchend", handleTouchEvent, false);}
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
