毫无保留开源我写的：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. redis 问题解决（MISCONF Redis is configured to save RDB snapshots）

    (error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on d ...

  2. Redis运维的一些常用的命令总结

    最近一直管理部门的一些redis的服务器,所以现在来总结一下redis的一些常用的运维命令: 1.time  显示服务器的时间,时间戳(秒) 微秒数 redis 127.0.0.1:6380> ...

  3. nginx的Location的总结以及rewrite规则的总结

    Location的语法: location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上. 比如,  ...

  4. fastreport 如何 设置 richview 的 行高

    richview中的行高改变有点特别.必须在AfterData 事件执行的时候才能修改: 也就是说,如果简单的放一个按钮,去发送消息给richView->RichEdit ,然后调用frxRep ...

  5. 第九十九天上课 PHP TP框架 数据库查询和增加

    在Model文件夹下创建模型,文件命名规则 : 表名Model.class.php <?php namespace Home\Model; use Think\Model; class yong ...

  6. XidianOJ 1177 Counting Stars

    题目描述 "But baby, I've been, I've been praying hard,     Said, no more counting dollars     We'll ...

  7. 数据库dump导入

    数据库dump导入 一.导入命令介绍: Oracle dump数据导入导出有两种方式:imp/exp.impdp/expdp.两者区别: 1.exp/imp客户端程序,受网络,磁盘的影响:impdp/ ...

  8. checkinstall打包工具使用

    checkinstall官网: http://asic-linux.com.mx/~izto/checkinstall/ 下载安装checkinstall: # git clone http://ch ...

  9. json 特殊字符 javascript 特殊字符处理(转载)

    特殊字符以前都是禁止页面输入,这样就简单不容易出错,但最近需求要求能输入特殊字符整理出java返回json时特殊字符的转义(不转义会破坏json数据格式导致页面读取数据出错) Java代码 publi ...

  10. asp.net mvc 如何将controller 里一个action 返回值为list<>的值输出到view

    在controller中:return View(myRole.ToList());在view文件开头加上:@model IEnumerable<LTXYCallCenter.Models.Ro ...