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应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- [翻译]jQuery十周年-John Resig
10th Anniversary of jQuery Today marks the 10th anniversary of the release of jQuery...[原文] 今天是jQuer ...
- Linux下定时备份数据库
linux下使用crontab定时备份MYSQL数据库的方法只需按照下面3步做,一切都在你的掌控之下: 第一步:在服务器上配置备份目录代码: mkdir /var/lib/mysqlbackup cd ...
- nginx 要改进的地方基础
- adb设备，根据serial获取vid pid
使用adb devices命令,可以轻松获取到所有连接到PC的adb设备的serial值. 但是adb命令无法获取adb usb设备的vendor id和product id. 本程序根据adb协议, ...
- HTTP请求和响应详解
HTTP有两部分组成:请求与响应,下面分别整理. 一．HTTP请求 1．HTTP请求格式: <request line> <headers> <blank line> ...
- 【算法Everyday】第一日 二叉查找树转双向链表
算法题目链接:http://bbs.csdn.net/topics/350093707 题目 // 1.把二元查找树转变成排序的双向链表 // 题目: // 输入一棵二元查找树,将该二元查找树转换成一 ...
- weblogic启动报错之WLS_DIAGNOSTICS000000.DAT
查看控制台日志报错信息如下: <-- 下午04时46分42秒 CST> <Notice> <Log Management> <BEA-> <The ...
- 【树状数组】CSU 1811 Tree Intersection (2016湖南省第十二届大学生计算机程序设计竞赛)
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1811 题目大意: 一棵树,N(2<=N<=105)个节点,每个节点有一种颜 ...
- 暴力求解——UVA 572(简单的dfs)
Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...
- Square（强大的剪枝）
http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=2410 /* 题意; 给出一定数量的棍子用这 ...