毫无保留开源我写的：IOS Android Ipad 多点触摸通用js 库

在线演示地址： http://m.yunxunmi.com/
支持 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);
}

运行效果：

用手机访问看看
上面蓝色区域可以感知手指的多点触摸
支持 IOS IPAD Android

在线演示地址： http://m.yunxunmi.com/
支持 IOS Android Ipad 等不同操作系统的手持或平板设备

手机APP开发 QQ交流群：181978302

毫无保留开源我写的：IOS Android Ipad 多点触摸通用js 库的更多相关文章

  1. ios实例开发精品文章推荐（8.12）11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  2. Android 中多点触摸协议

    http://blog.csdn.net/zuosifengli/article/details/7398661 Android 中多点触摸协议: 参考: http://www.kernel.org/ ...

  3. 根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面

    纯js,直接分享,直接使用: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVe ...

  4. 搞定android多点触摸模拟

    原理在android 创建多点触摸虚拟设备,然后往设备写模拟数据可以

  5. 浅谈 unix, linux, ios, android 区别和联系

    浅谈 unix, linux, ios, android 区别和联系 网上的答案并不是很好,便从网上整理的相对专业的问答,本人很菜,大佬勿喷 UNIX 和 Linux   UNIX 操作系统(尤尼斯) ...

  6. iOS(iPhone,iPad))开发(Objective-C)开发库常用库索引

    http://www.code4app.com 这网站不错,收集各种 iOS App 开发可以用到的代码示例  http://www.cocoacontrols.com/ 英文版本的lib收集  ht ...

  7. fir.im Weekly - iOS / Android 动态化更新方案盘点

    动态化更新是 App 开发必然面对的问题.在 iOS 环境下,Apple 开发者们像是" 带着手铐脚镣跳舞" ,相比之下 Android 开发者会轻松一点,有很多相关的开源框架帮助 ...

  8. iOS / Android 移动设备中的 Touch Icons

    上次转载了一篇<将你的网站打造成一个iOS Web App>,但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误,只是不适合自半年前来的情况了(也可以说是iOS7 之后的时间)—— ...

  9. 【转】从开发者的角度看待各移动平台 ios/android/wp7/win8ost title

    T_T 这伪技术博客都快给写成Tron的读书笔记专栏了,这样可不行欸~ 如今正是移动平台的战国时期,厌烦了去讨论移动平台的未来,也无意于在HTML5和Native App之间纠结.本文只从开发者纯技术 ...

随机推荐

  1. NHibernate系列文章十五：NHibernate组件

    摘要 前面文章介绍了NHibernate对简单.net数据类型的映射对照表.NHibernate也可以映射复杂数据类型,这里介绍通过组件映射NHibernate值对象. 1. NHibernate引用 ...

  2. TIJ读书笔记04-方法重载

    TIJ读书笔记04-方法重载 为什么会有方法重载 方法签名 如何区分重载 关于基本类型的重载 为什么会有方法重载 OOP的编程方式就是让程序的逻辑更加接近现实世界的逻辑. 而在现实世界中,自然语言本身 ...

  3. 开发BBS论坛

    一.涉及表结构 web\model.py(首选需要注意表结构的设计,如果表结构设计出来了,软件的架构也就基本出来了) #!/usr/bin/env python # _*_ coding:utf- _ ...

  4. mybatis like的用法

    oracle数据库: SELECT * FROM user WHERE name like CONCAT('%',#{name},'%') 或 SELECT * FROM user WHERE nam ...

  5. MongoDB-JAVA-Driver 3.2版本常用代码全整理(3) - 聚合

    MongoDB的3.x版本Java驱动相对2.x做了全新的设计,类库和使用方法上有很大区别.例如用Document替换BasicDBObject.通过Builders类构建Bson替代直接输入$命令等 ...

  6. 基于PHP生成静态页的实现方法

    t1.php 复制代码 代码如下: <?php// 方法一根据模版生成静态页面// replaceTemplateString函数用于替换模板中指定字符串function replaceTemp ...

  7. 想要隐藏navigationBar，同时又想支持右滑返回功能

    如果直接设置 self.navigationBarHidden = YES; 那同时也会屏蔽右滑返回功能. 解决办法1: self.navigationBarHidden = NO; self.nav ...

  8. C/ C++ 常见编程问题

    C 中容易忽略的问题 1.在C语言中,浮点型变量分为两类: a. 单精度型:类型说明符为float, 在Turbo C 中占4个字节(32位)内存空间,其数值范围为3.4E-38~3.4E+38,可提 ...

  9. IOC和AOP使用扩展 多种方式实现依赖注入

    多种方式实现依赖注入 1.Spring 使用setter访问器实现对属性的赋值, 2.Spring 构造constructor方法赋值, 3.接口注入 4.Spring P命名空间注入直接量 sett ...

  10. Linux上安装php

    1.安装mysql  http://blog.csdn.net/wy3552128/article/details/8143686 2.安装配置Apache  http://blog.csdn.net ...