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. c# 無彈窗调用打印机

    using System; using System.Collections.Generic; using System.Text; using System.Configuration; using ...

  2. glide简介

    golang包管理工具glide简介   golang包管理工具glide简介 前言 golang是一个十分有趣,简洁而有力的开发语言,用来开发并发/并行程序是一件很愉快的事情.在这里我感受到了其中一 ...

  3. LeapMotion预览——什么是LeapMotion

    LeapMotion预览 这个就是LeapMotion: 原文转自:   LeapMotion预览 LeapMotion 官网:http://leapmotion.com/ 开发者:https://d ...

  4. 欧拉计划（1~3）ps：以后看题一定要认真

    那天的题挺简单的 下面来看下 No1 If we list all the natural numbers below 10 that are multiples of 3 or 5, we get ...

  5. 【转载】之 破解 （【原创】Xenocode Postbuild 2009 加壳破解 （不断更新中...））

    声明 本文转载,感谢原作者dotNetSafe分享 [原创]Xenocode Postbuild 2009 加壳破解 (不断更新中...) http://bbs.pediy.com/showthrea ...

  6. KV总结

    今天没事又重新写了一遍.很多注释是自己犯糊涂后来又终于跨过去的备忘. // ImgEff.js function ImgEff(div,time){ //构造函数,需要传入参数div的id和时间 // ...

  7. WIN版的Jenkins Master加入LINUX的SLAVE节点，并作C++程序的集成交付

    这次深撸了一下JENKINS的配置,不敢说完全通了. 但对于整个体系,有了更新认识. 将LINUX作为SLAVE节点加入WIN的JENKINS里,网上有很多教程,依作即可. 在将相关任务分配给这个节点 ...

  8. 使用 InstallShield limited edition 打包部署Outlook 2013 Office add-in插件

    原文: Outlook: Deploying an Outlook 2013 add-in (using InstallShield LE) Today I had to create an inst ...

  9. HttpWebRequest.GetResponse() raises exception when http status code 400 (bad request) is returned

    参考: .Net HttpWebRequest.GetResponse() raises exception when http status code 400 (bad request) is re ...

  10. 两个div之间有空隙

    加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...