支持 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.js
var 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;
else
mTouchType = TouchType.Up;
}
else {
mValue = DiffX;
if (EX >= SX)
mTouchType = TouchType.Right;
else
mTouchType = 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);
}
