学习——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代码

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知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

随机推荐

[LeetCode]Median of Two Sorted Arrays 二分查找两个有序数组的第k数（中位数）
二分.情况讨论因为数组有序,所以能够考虑用二分.通过二分剔除掉肯定不是第k位数的区间.如果数组A和B当前处理的下标各自是mid1和mid2.则 1.假设A[mid1]<B[mid2], ①.若 ...
vim-YCM插件安装
这两天开始使用vim来学习C++语言,中间少不了要进行编译.才刚刚写了两个小例子就开始发现,每次都要退出vim来进行编译,实在太麻烦了.这时候才想到之前有在一本关于vim的书籍上看到quickfix的 ...
Mysql优化理论知识
参考文章 http://blog.51cto.com/lizhenliang/2095526 ()硬件优化如果有条件一定要SSD固态硬盘代替SAS机械硬盘,将RAID级别调整为RAID1+,相对于R ...
[HNOI2012] 永无乡解题报告 (splay+启发式合并)
题目链接:https://www.luogu.org/problemnew/show/P3224#sub 题目: 题目大意: 维护多个联通块,没有删除操作,每次询问某一联通块的第k大解法: 维护联通 ...
POJ 3273 二分答案
思路:二分答案经典题吧....注意边界就OK了 //By SiriusRen #include <cstdio> #include <algorithm> using name ...
MetaSploit攻击实例讲解------工具Meterpreter常用功能介绍（kali linux 2016.2(rolling)）（详细）
不多说,直接上干货! 说在前面的话注意啦:Meterpreter的命令非常之多,本篇博客下面给出了所有,大家可以去看看.给出了详细的中文由于篇幅原因,我只使用如下较常用的命令. 这篇博客,利用下面 ...
Java Web应用定制404错误页面
Http响应状态码404的含义是服务器端没有找到客户端请求的资源,定制404错误页面至少有以下两个好处: 1.向客户端隐藏服务器信息,服务器提供的默认404错误页面上一般都包含当前应用使用的是什么服务 ...
RecyclerView让列表嵌套如此简单
平常开发时,相信像这样的页面,大家一定是遇到过的.这里比较坑爹的地方在于呢:列表嵌套.订单列表中的每一项,都包含一个商品列表.像这种需求,大家会如何实现呢? 这里呢,说一下我自己的思路,我没有使用列表 ...
JavaScript总结（4）
如何绑定事件程序员可以编写代码,要求页面在发生了某些事件时调用相应的JavaScript语句或函数,这被称为事件的绑定.事件的绑定有3种方式.1)在HTML标记中直接声明,这是最常见的一种做法.语法 ...
.net 操作INI文件
using System.Runtime.InteropServices; using System.Text; namespace FaureciaManager { public class Fi ...

学习——HTML5中事件

学习——HTML5中事件的更多相关文章

随机推荐

热门专题