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应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- c++ undefined reference to mysqlinit
Solved g++ $(mysql_config --cflags) file.cpp -o filename $(mysql_config --libs)
- PHP下编码转换函数mb_convert_encoding与iconv的使用说明
mb_convert_encoding这个函数是用来转换编码的. 不过英文一般不会存在编码问题,只有中文数据才会有这个问题.比如你用Zend Studio或Editplus写程序时,用的是gbk编码, ...
- 使用PHP预定义变量得到url地址及相关参数
获取url地址栏参数多种方法:$_SERVER["SERVER_PORT"]//获取端口$_SERVER['HTTP_HOST']//获取域名或主机地址 如www.sina.com ...
- php foreach 使用&(与运算符)引用赋值要注意的问题
首先了解一下“引用赋值”,看一个例子: <?php <?php $a=123; $a=123; $b=$a; $b=&$a; $a=321; $a=321; echo"$ ...
- Python核心编程2第六章课后练习
6-1 字符串 .string 模块中是否有一种字符串方法或者函数可以帮我鉴定一下一个字符串是否是另一个大字符串的一部分? #!/usr/bin/env python def contain(str1 ...
- centos下安装chdmg
http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个 yum clean all yum update 1.保证selinux关闭 / ...
- MAC OSX使用篇
前述: 从windows平台切换到osx平台,的确没能一下子适应过来,在使用过程当中遇到了很多问题. link1:osx卸载应用程序的四种方法 link2:(推荐看)开始使用Mac OS X——写给M ...
- phread_con_wait和pthread_mutex_lock实现的生产者消费者模型
条件变量是利用线程间共享的全局变量进行同步的一种机制, 主要包括两个动作:一个线程等待"条件变量的条件成立"而挂起: 另一个线程使"条件成立"(给出条件成立信号 ...
- 用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...
- 应用SVN（CentOS中搭建SVN服务器）
简单介绍如何在虚拟机 CentOS 中,搭建 SVN 服务器. 软件版本信息 Vmware 10.0.0 build-1295980 CentOS 7.0-1406-x64 Java 1.7.0_67 ...