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应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- CMD下查询Mysql中文乱码的解决方法
我的MySQL是默认utf8编码的,所建数据库也是设置utf8编码,使用程序可以新增中文数据,在cmd中使用SQL语句新增数据则报类似Incorrect string value: '\xB2\xE2 ...
- pycharm常用快捷键与设置
pycharm高频率使用的快捷键 Ctrl+Shift+F10 运行当前的页面 Ctrl + / 注释(取消注释)选择的行 Ctrl+Shift+F 高级查找 Shift + Enter 开始新行 T ...
- C语言知识总结
明白一些变量 熟悉一些语句 组合一些函数 C语言——>库 帮你写好放在库中 魔数 凭空变出来的数字,不知道 数字表示的含义,影响代码的可读性. C语音的参数传递 非常特殊,传递的是一个替身. ...
- 使用ToUpperInvariant避免使用ToUpper
ToUpperInvariant使用不依赖于区域性进行转换,而ToUpper则使用了当前线程的CultureInfo,进行转换,所以性能会有所影响,以下为测试: [Test] public void ...
- 不定参数函数原理以及实现一个属于自己的printf函数
一.不定参数函数原理 二.实现一个属于自己的printf函数 参考博文:王爽汇编语言综合研究-函数如何接收不定数量的参数
- cf B Red and Blue Balls
思路:把字符串转化为一个二进制,遇到B就是一个数二进制中的1,答案就是这个数. #include <cstdio> #include <cstring> #include &l ...
- h.264语法结构分析
NAL Unit Stream Network Abstraction Layer,简称NAL. h.264把原始的yuv文件编码成码流文件,生成的码流文件就是NAL单元流(NAL unit Stre ...
- PHP SPL使用
转载文章:php遗落的宝石 Rafael Dohms 上面的篇文章 让我惊艳了下,忍不住就翻译了下来,同时补充了部分内容. SPL,PHP 标准库(Standard PHP Library) ,此从 ...
- Linux Kernel 本地拒绝服务漏洞
漏洞名称: Linux Kernel 本地拒绝服务漏洞 CNNVD编号: CNNVD-201308-090 发布时间: 2013-08-08 更新时间: 2013-08-08 危害等级: 漏洞类 ...
- Watch OS2.0开发概述
(注:尊重劳动成果,转载请注明出处 http://www.cnblogs.com/xiaochunle/p/4620230.html ) Watch OS 2.0时代 北京时间2015年6月9日,WW ...