手机网站(html5)之touch事件
来源:互联网 发布:人物关系网络 算法 编辑:程序博客网 时间:2024/05/05 04:41
这里我们介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
touchcancel:事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX
/pageX
/clientX
/clientY/screenX/screenY
:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX
/radiusY/
rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持
/*单指拖动*/var obj = document.getElementById('id');obj.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.preventDefault();// 阻止浏览器默认事件,重要 var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 obj.style.left = touch.pageX-50 + 'px'; obj.style.top = touch.pageY-50 + 'px'; }}, false);
事件组合
事件顺序
操作
touchstart->touchend
点击(触屏立即结束)
touchstart->touchmove(多个)->touchend
拖拽(触屏-->移动一段距离-》结束)
touchstart->touchmove(多个)->touchcancel
拖拽(触屏-->移动一段距离-->结束)
touchmove(多个)->touchcancel
划过(移动一段距离-->结束)
touchmove(多个)->touchend
划过(移动一段距离-->结束)
网站中具体使用
<div>初始:<input type="text" id="csid" />移动:<input type="text" id="ydid" />结束:<input type="text" id="jsid" /></div>
<div style="width: 100%;height: 200px;background-color: red" id="mouid">
afadfasfsadas<br/>afadfasfsadas<br/>afadfasfsadas<br/>afadfasfsadas<br/>
</div>
<input id="djceshi" type="button" value="4588" />
<script type="text/javascript">
//判断平台
function IsPC()
{
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
//不同终端使用不同监听
var touchEvents = {
touchstart: "touchstart",
touchmove: "touchmove",
touchend: "touchend",
/**
* @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件
*/
initTouchEvents: function () {
if (IsPC()) {
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
}
}
};
touchEvents.initTouchEvents();
//移动端屏蔽pc端的事件。pc端屏蔽移动端的事件
document.addEventListener(touchEvents.touchstart, function (event) {
event.preventDefault();
});
document.addEventListener(touchEvents.touchmove, function (event) {
event.preventDefault();
});
document.addEventListener(touchEvents.touchend, function (event) {
event.preventDefault();
});
//具体使用案例
document.getElementById("mouid").addEventListener(touchEvents.touchstart,function(event){
if(touchEvents.touchstart=="touchstart")
{
if(event.targetTouches.length==1)
{ event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
document.getElementById("csid").value=touch.pageX;
}
}
});
document.getElementById("mouid").addEventListener(touchEvents.touchmove,function(event)
{
if(touchEvents.touchstart=="touchstart")
{
if(event.targetTouches.length==1)
{ event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
document.getElementById("ydid").value=touch.pageX;
}
}
});
//结束触屏的事件,此事件中 event.targetTouches.length 为0因为手指结束触屏
document.getElementById("mouid").addEventListener(touchEvents.touchend,function(event)
{
document.getElementById("jsid").value="结束";
});
document.getElementById("djceshi").addEventListener(touchEvents.touchend,function(event)
{
document.getElementById("jsid").value="点击";
});
- 手机网站(html5)之touch事件
- 【html5构建触屏网站】之touch事件
- html5构建触屏网站之touch事件
- 【html5构建触屏网站】之touch事件
- 【html5构建触屏网站】之touch事件
- 【html5构建触屏网站】之touch事件
- html5手机端触屏事件(touch事件)第一章
- html5手机触屏touch事件介绍
- 手机端html5触屏事件(touch事件)
- html5手机端触屏事件(touch事件)第二章
- 手机端html5触屏事件(touch事件)
- 手机端html5触屏事件(touch事件)
- 手机端html5触屏事件(touch事件)3
- cocos2d-html5教程之-键盘事件和touch事件
- 手机端 touch 事件
- Cocos2d-html5 touch事件总结
- HTML5触摸事件touch监听
- 手机触控事件touch
- 面向对象中多态和泛型的关系
- 绿色版的PDF格式文件转换器
- [PHP]会话小结
- 全角半角转换
- 6、谈PLC在数控机床(数控铣床/数控车床/加工中心/钻攻中心)的运用——多普康自动化制作
- 手机网站(html5)之touch事件
- 一个简单的socket服务器但程序
- 使用ScriptManager+UpdatePanel+Timer控件实现在GridView中倒计时功能
- 第10周项目4-大奖赛计分(控制评委人数)
- Wildcard Matching
- 8句话让你彻底明白什么是大数据营销
- MFC的回调函数
- AOSP Android5.0 lollipop 源码同步更新方法
- [PHP]加密小结