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应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- 算法系列之图--DFS
深度优先搜索使用的策略是,只要与可能就在图中尽量“深入”.DFS总是对最近才发现的结点v出发边进行探索,知道该结点的所有出发边都被发现为止.一旦v的所有出发边都被发现了,搜索就回溯到v的前驱结点(v是 ...
- javascript 函数声明问题
(function(){ //运行正常 test1(); function test1() { console.log('123'); }; })() (function(){ //出错,test2未 ...
- 《JavaScript高级程序设计 第3版》-学习笔记-1
P1-P30页 1.<script>标签的属性 async:async(html) | async="async"(xhtml),表示立即下载脚本,但不马上执行(执行 ...
- Linux 使用yum install安装mysql登陆不上解决办法
CentOS yum安装mysql后 Can’t connect to local MySQL server through socket ‘/var/lib/ CentOS Can’t connec ...
- 舵机的PWM控制学习随笔
舵机的控制信号,对于脉宽调制信号的脉宽变换,常用的一种方法是采用调制信号获取有源滤波后的直流电压,但是需要50Hz(周期是20ms)的信号,这对运放器件的选择有较高要求,从电路体积和功耗考虑也不易采用 ...
- LINUX HA:Pacemaker + Corosync初配成功
参考很多文档: http://zhumeng8337797.blog.163.com/blog/static/100768914201218115650522/ 下一步,想想这个PC组和与HAPROX ...
- 使用SSH代理上IPV6（使用SSH端口转发）
这几个月在国外待着,一直担心我的六维账户怎么办,那可是个宝贝啊.我看网上说可以用六飞啊神马的在IPV6下上IPV6的网站,但是冒失现在六维封禁了非学校的IPV6地址,所以这些软件就不顶用了. 想到以前 ...
- c#获取带有汉字的字符串长度
不知道大家注意没,用c#下自带的str.Length方法获得字符串str长度的时候,返回的总是字符的个数,但是如果字符串中包含汉字的话,一个汉字是占两个字符长度的,获取的长度值就有了问题. 解决方案: ...
- oracle触发器与:new,:old的使用 --5
:new --为一个引用最新的列值;:old --为一个引用以前的列值; 这两个变量只有在使用了关键字 "FOR EACH ROW"时才存在.且update语句两个都有,而inse ...
- QQ互联 回调地址
http://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98% ...