javascript touch事件
touchstart : 當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
touchmove : 當手指在屏幕上滑動時連續的觸發，在這個事件發生期間，商用preventDefault()可阻止滾動。
touchend : 當手指從屏幕上移開時觸發。
除了常見的DOM屬性處，觸摸事件還包含下列三個用於跟蹤觸摸的屬性：
touches : 表示當前跟蹤的觸摸操作的Touch對象的數組。
targetTouches : 特定於事件目標的Touch對象的數組。
changeTouches : 表示自上次觸摸以來發生了什麼改變的Touch對象的數組。
每個Touch對象包含下列屬性
clientX : 觸摸目標在視口中的X座標。
clientY : 觸摸目標在視口中的Y座標。
identifier : 表示觸摸的唯一ID。
pageX : 觸摸目標在頁面中的x座標。
pageY : 觸摸目標在頁面中的y座標。
screenX : 觸摸目標在屏幕中的x座標。
screenY : 觸摸目標在屏幕中的y座標。
target : 觸摸的DOM節點座標。
下面例子：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>touch事件</title>
</head>
<body>
<style type="text/css">
#c_card{ width:100px; height:200px; border:#F00 1px solid;}
</style>
<section>
<div id="c_card"></div>
</section>
<script type="text/javascript">
function touchStart(event){
if(event.targetTouches.length != 1){return false;}//單點觸控
touch = event.targetTouches[0];
touObj.innerHTML = touch.pageX+'_'+touch.pageY; } function touchMove(event){
event.preventDefault();
if(event.targetTouches.length != 1 || !move){return false;}//單點觸控
touch = event.targetTouches[0];
touObj.innerHTML = touch.pageX+'_'+touch.pageY;
} function touchEnd(event){
touObj.innerHTML = 'end';
} var touObj = document.getElementById("c_card");
touObj.addEventListener("touchstart",touchStart,false);
touObj.addEventListener("touchmove",touchMove,false);
touObj.addEventListener("touchend",touchEnd,false); </script>
</body>
</html>
javascript touch事件的更多相关文章
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- javascript——touch事件
前言 诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,w ...
- [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常 ...
- javaScript -- touch事件详解（touchstart、touchmove和touchend）
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 浅谈javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...
- javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 $(function(){document.addEventListener("touchmove", _touch, false) ...
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
- 手持设备点击响应速度，鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- 【Windows核心编程】Windows常见数据类型
一,常见数据类型 WORD: 16位无符号整形数据 DWORD: 32位无符号整型数据(DWORD32) DWORD64: 64位无 ...
- delphi 2010 动态链接库DLL断点调试
DELPHI 2010 动态链接库DLL断点调试 马根峰 (广东联合电子服务股份有限公司,广州 510300) 摘要:本文详细介绍了Delphi 2010中的动态链接库DLL断点调试技术 关键词:DE ...
- python模块之re正则表达式
41.python的正则表达式 1. python中re模块提供了正则表达式相关操作 字符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \W大写代表非\w ...
- linux c数据库备份第一版
使用linuxC实现的mysql数据库备份目标:通过alarm信号定时备份数据库备注:目前是第一个版,本身不能定时备份可以结合linux自动化实现定时备份.运行平台:Linux或类unix测试平台:u ...
- Java高阶面试问题合集
下面总结一下在Java面试中常用的一些问题,不具体解答,我只附上一些精彩的博文链接. Spring IOC AOP 底层原理 JAVA的反射机制和动态代理 Java反射机制和动态代理 多线程 Spri ...
- ZT: WEB学习资料
根据个人经验整理一些Web开发的一些技术书籍,希望对需要进入Web开发领域的TX有所指导,由于是在家里整理的,所有每本书对应的豆瓣链接打不开,如果整理有缺陷请多多指出. 入门篇:通过相关技术的全面基础 ...
- iOS环形控制器、环形按钮
这两天接手了一个外包的UI,有一个环形的控制器,需求改啊改的:“安卓已经实现了……”,最讨厌这句了,最后做了一版,对方终于满意了,删掉其他的繁琐部分,留下控制器部分,大家看看,有更好的想法欢迎分享. ...
- VS2012中使用Boost库的方法(超级简单)
很不错的博客一定得看 http://my.csdn.net/caimouse 1.下载boost库 从http://www.boost.org上下载到目前最新的boost库,快速传送门:boost_1 ...
- Intra Luma Prediction
在宏块的帧内预测过程中,有四种宏块类型:I_4x4,I_8x8,I16x16,I_PCM.他们都需要在相邻块做去块滤波之前进行帧内预测. 亮度帧内预测的总体流程 1-4获取当前block的帧内预测模式 ...
- oralce 仅配置精简客户端 连接plsql （ 版本需一直，要不都是32要不是都是64）
1.Oracle服务器已经安装完成,版本10.2.0. 2.访问www.oracle.com,下载Oracle精简客户端. 下载页面地址:http://www.oracle.com/technetwo ...