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. HTML5 表单与文件

    -新增元素与属性 form.formaction.formmethod.placeholder(处于未输入状态时文本框显示的输入提示).autofocus(自动获取光标焦点).list(该属性的值为某 ...

  2. 微信JS-SDK实际分享功能

    为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了,在ipho ...

  3. wdcp-apache配置错误导致进程淤积进而内存吃紧

    内存总是越来越少,虚拟内存使用越来越多 首先确定到底是什么占用了大量的内存 可以看到,大部分内存被闲置的httpd进程占用 且当我重启mysql服务后,内存没有出现明显变化,但是当我重启apache时 ...

  4. 学会爱上iOS自动布局（Auto Layout） - 剑尖

    本文翻译自Yari Dareglia的LEARN TO LOVE AUTO LAYOUT文章先生们,女士们,让我们以正确的心态开始本教程吧:自动布局就是简单!我花了一段时间来掌握自动布局是如何工作的, ...

  5. iOS中获取各种文件的目录路径和文件

    iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. documents,tmp,app,Library. (NSHomeDirectory ...

  6. BZOJ 1017 魔兽地图

    Description DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the Anc ...

  7. codeforces C. Restore Graph

    题意:构造一个有n个顶点,每个点度不超过k,然后给出每一个点到达一个定点的最短距离d数组,然后构造出这样的一个图: 思路:排序之后,有两个距离为0的或者没有直接输出-1,然后用两个游动下表,后面的与前 ...

  8. keil 51启动代码

    Startup code:启动代码. 在Keil中,启动代码在复位目标系统后立即被执行.启动代码主要实现以下功能: (1) 清除内部数据存储器 (2) 清除外部数据存储器 (3) 清除外部页存储器 ( ...

  9. 【spring-boot】spring aop 面向切面编程初接触--切点表达式

    众所周知,spring最核心的两个功能是aop和ioc,即面向切面,控制反转.这里我们探讨一下如何使用spring aop. 1.何为aop aop全称Aspect Oriented Programm ...

  10. Arrays常用API的事例

    import java.util.ArrayList;import java.util.Arrays;import java.util.List; public class TestArrays { ...