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

(5)mouseup

(6)click

(7)touchend

介绍了这么多,这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有:iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了,

HTML5中新添加事件的更多相关文章

  1. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  2. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  3. hibernate(*.hbm.xml)中新添加的字段被标记为红色(找不到)的解决方法

    首先得是以这个方式生成的bean和xml,配置好了数据源(这样才能让hibernate中的配置和mysql进行交互) https://www.cnblogs.com/kinome/p/10549969 ...

  4. 第87天:HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  5. 【HTML5】HTML5中video元素事件详解(实时监测当前播放时间)

    html 代码..video后边几个元素,可处理ios 系统的兼容性 <video id="myVideo" controls="controls" po ...

  6. 测试开发之前端——No8.HTML5中的媒介事件

    媒介事件 由视频.图像以及音频等媒介触发的事件. 适用于所有 HTML 5 元素,不过在媒介元素(诸如 audio.embed.img.object 以及 video)中最常用: 属性 值 描述 on ...

  7. FlowPortal BPM 明细表中新添加的行一直排在最后的问题

    明细表中的数据提交过之后再编辑时,添加的行不管在第几行添加都显示在最后一行的问题 Solution:明细表的数据库表中加字段OrderIndex,设为必填,系统会自动排序

  8. html5中新的标准属性

    属性                                        值                                  描述accesskey             ...

  9. 测试开发之前端——No7.HTML5中的鼠标事件

    鼠标事件 由鼠标或相似的用户动作触发的事件. 适用于所有 HTML 5 元素: 属性 值 描述 onclick script 当单击鼠标时运行脚本 ondblclick script 当双击鼠标时运行 ...

随机推荐

  1. UML用例图

  2. Objdump-查看汇编指令

    作用 Objdump可以用来看汇编指令 查看汇编指令 测试文件 编译指令 gcc -g -o objtest 1.8.c objdump -S objtest |more /main 查看结果

  3. 包含Blob字段的表无法Export/Import

    最近一直用MySQL-Front的导出导出工具完成数据库的备份,确实比较方便快捷. 后来增加了一张表,其中有blob字段,上传几个文件后,发现导出不好用了,进度条长期处于停滞状态. 想想也是,要把bl ...

  4. Android 自定义属性

    values新建一个attrs.xml<resource>    <declare-styleable name = "MyTextView">    &l ...

  5. [unroll(num)] for(int i;i&lt;num;i++)

    https://msdn.microsoft.com/en-us/library/windows/desktop/bb509602(v=vs.85).aspx Unroll the loop unti ...

  6. The Signals Of Process Communication

    在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...

  7. c#委托与事件(详解)

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  8. POST请求中参数以form data和request payload形式+清空数组方式

    测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeappli ...

  9. 【经验随笔】 Tomcat多个APP使用相同名称环境变量导致问题

    背景介绍 之前遇到一个问题,在一个tomcat下部署了两个APP,其中一个APP不能正常从底层接口获取数据.如果将两个APP分到不同服务器上的tomcat部署,又都正常了.分析了一下: 远程调试跟代码 ...

  10. https://www.cnblogs.com/xubing-613/p/5895948.html

    最近总是需要用matplotlib绘制一些图,由于是新手,所以总是需要去翻书来找怎么用,即使刚用过的,也总是忘.所以,想写一个入门的教程,一方面帮助我自己熟悉这些函数,另一方面有比我还小白的新手可以借 ...