IOS Android Ipad 多点触摸通用js 库

支持 IOS Android Ipad 等不同操作系统的手持或平板设备

代码如下：

一、index.html

<html>

<title>手指触摸事件</title>

<head>

#touchable

{

height: 75px;

width: 197px;

background-color: #0033CC;

color: #FFCC66;

text-align: center;

}

#output

{

height: 200px;

width: 200px;

}

</style>

</head>

<body>

<b>

<br />

<br />

用来判断上下移动</span></b>

</div>

<br/>

</textarea>

//触摸后回调方法

//第一触点开始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,

补充：移动开发 , IOS ,

上一个：控制键盘只能输入数字
下一个：IOS 时间格式时间转换大总结

更多图片编程知识:

更多JS疑问解答：: 几个验证11位手机号码格式的js代码; js把图片转换成 base64代码; js把base代码转换成图片; JS 将 base64编码的图片转化为图片文件; js中的定时器; js如何获得FCKeditor控件的值; 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...; JS验证，这块“牛皮”反复修改都不能实现; 在JS中使用DOM模型; 如何用JS 获取本地文件夹的文件列表; js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？; 求实现自动生成图片缩略图的JS代码; JS脚本网页问题; js，代码中"object"和"Object"区别？; js+flash实现网页图片切换效果，出现边框，单击激活此控件。