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事件的更多相关文章

  1. javascript——touch事件介绍与实例演示

      分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...

  2. javascript——touch事件

    前言 诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,w ...

  3. [转]html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove

    前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常 ...

  4. javaScript -- touch事件详解（touchstart、touchmove和touchend）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  6. 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...

  7. javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 $(function(){document.addEventListener("touchmove", _touch, false) ...

  8. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  9. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

随机推荐

  1. getJSON回调函数不执行问题？

    利用getJSON异步请求时,回调函数不执行,不知道是什么问题? php 返回数据 header("Content-type:text/json"); echo json_enco ...

  2. img超出div width时， jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  3. openerp 中如何方便对搜索时间段

    以前为了方便的搜索时间区间,经常用wizard对方式,设置开始  结束时间,需要做大量对代码工作, 今天看了search view对组成, 可以用2个filter_domain 来做, 这样用户需要输 ...

  4. iOS 检测版本更新

    如果我们要检测app版本的更新,那么我们必须获取当前运行app版本的版本信息和appstore 上发布的最新版本的信息. 当前运行版本信息可以通过info.plist文件中的bundle versio ...

  5. ps批量修改图片

    批量更改图片尺寸的ps脚本 高端干货!PHOTOSHOP实用脚本大合集

  6. Oracle问题解决（sqlplus无法登陆）

    命令行 sqlplus 无法登陆,常常是用户名/密码错误.监听配置错误或未启动.数据库服务名丢失等等原因. 用户名/密码错误 找到自己设的密码 这全靠自己创建数据库实例时,备份或记住相关信息 若最后没 ...

  7. BZOJ 1029 建筑抢修

    Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的损伤,如果不尽快修 ...

  8. SQL Server查看所有表大小，所占空间

    create table #Data(name varchar(100),row varchar(100),reserved varchar(100),data varchar(100),index_ ...

  9. bzoj3721

    不是说好的20s吗,怎么我19s都超时……逗我最后还得写成c++才能过……首先不难发现询问肯定是O(1)的复杂度我们先把奇数和偶数分开排序,不难发现几个性质1. 奇数的个数一定是奇数2. 奇数选取随k ...

  10. vim学习与理解

    1. 转变思维 --> vim 无鼠标文本编辑工具 在鸟哥的linux私房菜中,是这么说明linux的: 1. vim是linux like系统中非常强大的一个文本编辑工具,历史悠久,很多系统都 ...