html5 触摸 滚动,html5的触摸事件
1.触摸事件有哪些
touchstart，touchmove，touchend
2.分别什么时候触发
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
3.每个事件中的touch对象如何获得
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
最好统一使用一个touch对象数组
4.如何获得touch对象的相应属性
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
5.举例子
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
HTML5触摸事件(touchstart、touchmove和touchend) (转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
(转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
关于windows phone 8.1系统手机对html5触摸事件的支持情况
近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统, ...
HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...
HTML5触摸事件演化tap事件
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
HTML5触摸事件
touchstart .touchmove .touchend 事件 touchstart事件:当手指触摸屏幕时触发,即使有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动时触 ...
随机推荐
Quartus II USB-Blaster驱动解决
Quartus II USB-Blaster驱动解决 之前安装Quartus II 13.0,但FPGA开发板链接的USB-Blaster链接无法被Quartus识别,改装Quartus II 11. ...
修改thinkphp路由模式，去掉Home
第一步:入口文件增加 define('BIND_MODULE', 'Home'); 第二步:修改config文件,我这里路由模式设置为2 效果展示:
【编程题目】输出 1 到最大的 N 位数
65.输出 1 到最大的 N 位数(运算)题目:输入数字 n,按顺序输出从 1 最大的 n 位 10 进制数.比如输入 3,则输出 1.2.3 一直到最大的 3 位数即 999. 思路:肯定要考虑数字 ...
C#学习1
一.C#可以干什么? 1.桌面应用程序,WinForm 2.Internet应用程序,ASP.Net 3.手机开发,WindowsPhone8 二..Net开发学习路线 C#语言——>简单的Wi ...
MySql常用函数 --MySql
1.目标 MySQL数据库中提供了很丰富的函数.MySQL函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数.格式化函数等.通过这些函数,可以简化用户的操作.例如,字符 ...
IdentityServer4系列之中文文档及实际项目经验分享
0.前言 原文:http://docs.identityserver.io/en/release/声明: 1.目录一至五章节根据IdentityServer英文文档翻译而来,有些内容会根据自己的理解来 ...
sql 存储过程导出指定数据到.txt文件(定时)
需求:每天生成一份txt文件数据,供第三方通过http方式调用 方法: 1.新建存储过程: USE [LocojoyMicroMessage] GO /****** Object: StoredPro ...
ORA-01153: an incompatible media recovery is active
ORA-01153: an incompatible media recovery is active Cause: Attempted to start an incompatible media ...
RocketMQ 安装
RocketMQ 安装 1.进入目录 cd /usr 2.下载 wget http://mirrors.tuna.tsinghua.edu.cn/apache/rocketmq/4.3.0/rocke ...
Scrapy框架学习(四)爬取360摄影美图
我们要爬取的网站为http://image.so.com/z?ch=photography,打开开发者工具,页面往下拉,观察到出现了如图所示Ajax请求, 其中list就是图片的详细信息,接着观察到每 ...