学习——HTML5中事件
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。
JavaScript代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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 ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
break;
}
}
}
window.addEventListener('load',load,false);
|
HTML代码
| 1 | <div id="inp"></div> |
上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{width:100%; height:500px; background-color:red;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oDiv = document.getElementById('box');
var i = 0;
touchFunc(oDiv,'left',function(){
alert('left');
})
touchFunc(oDiv,'right',function(){
alert('right');
})
touchFunc(oDiv,'top',function(){
alert('top');
})
touchFunc(oDiv,'down',function(){
alert('down');
})
//三个参数，对象，事件，执行的函数
function touchFunc(obj,type,func) {
//滑动范围在5x5内则做点击处理，s是开始，e是结束
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase(); obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false); obj.addEventListener("touchmove",function() {
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move")!=-1) func();
}, false); obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//左右事件
if(changeX > 0) {
if(type.indexOf("left")!=-1) func();
}else{
if(type.indexOf("right")!=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//上下事件
if(changeY > 0) {
if(type.indexOf("top")!=-1) func();
}else{
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//点击事件，此处根据时间差细分下
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); //长按
}
else {
if(type.indexOf("click")!=-1) func(); //当点击处理
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};
</script>
</body>
</html>
(5)mouseup
(6)click
(7)touchend
学习——HTML5中事件的更多相关文章
- 关于学习HTML5中自己犯的错误
7.1写错了 siblings()这个函数写成了sibling,在jQuery中并没有这个函数的定义 在查找错误的过程中,自己也发现了一个学习jQuery的网站http://www.365mini.c ...
- 学习html5 中的canvas（一）
1.canvas画直线 <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- HTML5中新添加事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 测试开发之前端——No4.HTML5中的事件属性
HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...
- [学习总结]5、Android的ViewGroup中事件的传递机制（二）
下面是第一篇的连接 Android的ViewGroup中事件的传递机制(一) 关于onInterceptTouchEvent和onTouchEvent的详细解释. 1 public class Mai ...
- [学习总结]4、Android的ViewGroup中事件的传递机制（一）
本文主要针对dispatchTouchEvent,onInterceptTouchEvent,onTouchEvent三个方法,通过简单的例子来简单的介绍下. 根据字面意思的理解,dispatchTo ...
- 大熊君学习html5系列之------Online && Offline（在线状态检测）
一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...
- 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API（SPA单页应用的必备）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
随机推荐
- 三角函数之美-水波纹载入LoadingView
一.前言 学习是要总结的.近期几天学习了画图相关的,可是使用的机会较少,如今又快要遗忘了,这次看了水波纹的绘制.认为十分有意思,还是 把实现的方法记录下来.技术无他,为手熟尔.还是要多练习,空淡误国, ...
- Android平台Camera实时滤镜实现方法探讨(九)--磨皮算法探讨(一)
上一篇开头提到了一些可用于磨皮的去噪算法.以下我们实现这些算法而且观察效果,咱不考虑实时性的问题 本文首先探讨的首先是<基于局部均方差相关信息的图像去噪及其在实时磨皮美容算法中的应用> 该 ...
- 怎样实如今Windows下编写的代码，直接在Linux下编译
方法一: 怎样实如今Windows7下编写Linux程序.写完程序以后.不用复制文件,直接在Linux(RHEL6.5)机器上编译最新的代码. 1.首先将Windows的代码目录设置为共享目录: 2. ...
- 疯狂java讲义之数据类型与运算符
Java是一门强类型语言 所有变量必须先声明.后使用 指定类型的变量只能接受类型匹配的值 注释 @author 作者 @version 版本 @param 方法参数 @return 返回值 标识符与关 ...
- 设置和获取Android中各种音量
通过程序获取android系统手机的铃声和音量.同样,设置铃声和音量的方法也很简单! AudioManager am = (AudioManager) getSystemService(Context ...
- tomcat到底是干什么用的？用大白话讲一下
通俗点说他是jsp网站的服务器之一,就像asp网站要用到微软的IIS服务器,php网站用apache服务器一样,因为你的jsp动态网站使用脚本语言等写的,需要有服务器来解释你的语言吧,服务器就是这个功 ...
- Data flow diagram-数据流图
A DFD shows what kind of information will be input to and output from the system, how the data will ...
- UI Framework-1: Aura Views
Views Views is a user interface framework built on a type called, confusingly, View. Responsible for ...
- [JSOI2007]文本生成器（AC自动机+DP）
题意 给你n个串.问有多少长度为m的串使得这n个串至少在其中出现过一次.输出答案膜10007意义下的结果. (n<=100,每个串的长度<=100) 题解 在AC自动机上跑DP. 用到一个 ...
- Conservative GC （Part two :MostlyCopyingGC ）
目录 MostlyCopyingGC 概要 堆结构 分配 new_obj()函数 add_pages()函数 GC执行过程 mostly_copying()函数 promote_page()函数 pa ...