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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 #box{width:100%; height:500px; background-color:red;}
 8 </style>
 9 </head>
10 <body>
11 <div id="box"></div>
12 <script>
13 var oDiv = document.getElementById('box');
14 var i = 0;
15 touchFunc(oDiv,'left',function(){
16     alert('left');
17 })
18 touchFunc(oDiv,'right',function(){
19     alert('right');
20 })
21 touchFunc(oDiv,'top',function(){
22     alert('top');
23 })
24 touchFunc(oDiv,'down',function(){
25     alert('down');
26 })
27 //三个参数，对象，事件，执行的函数
28 function touchFunc(obj,type,func) {
29     //滑动范围在5x5内则做点击处理，s是开始，e是结束
30     var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
31     var sTime = 0, eTime = 0;
32     type = type.toLowerCase();
33  
34     obj.addEventListener("touchstart",function(){
35         sTime = new Date().getTime();
36         init.sx = event.targetTouches[0].pageX;
37         init.sy = event.targetTouches[0].pageY;
38         init.ex = init.sx;
39         init.ey = init.sy;
40         if(type.indexOf("start") != -1) func();
41     }, false);
42  
43     obj.addEventListener("touchmove",function() {
44         event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
45         init.ex = event.targetTouches[0].pageX;
46         init.ey = event.targetTouches[0].pageY;
47         if(type.indexOf("move")!=-1) func();
48     }, false);
49  
50     obj.addEventListener("touchend",function() {
51         var changeX = init.sx - init.ex;
52         var changeY = init.sy - init.ey;
53         if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
54             //左右事件
55             if(changeX > 0) {
56                 if(type.indexOf("left")!=-1) func();
57             }else{
58                 if(type.indexOf("right")!=-1) func();
59             }
60         }
61         else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
62             //上下事件
63             if(changeY > 0) {
64                 if(type.indexOf("top")!=-1) func();
65             }else{
66                 if(type.indexOf("down")!=-1) func();
67             }
68         }
69         else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
70             eTime = new Date().getTime();
71             //点击事件，此处根据时间差细分下
72             if((eTime - sTime) > 300) {
73                 if(type.indexOf("long")!=-1) func(); //长按
74             }
75             else {
76                 if(type.indexOf("click")!=-1) func(); //当点击处理
77             }
78         }
79         if(type.indexOf("end")!=-1) func();
80     }, false);
81 };
82 </script>
83 </body>
84 </html>

 

(5)mouseup

(6)click

(7)touchend

 

posted @ 2016-10-16 21:28  ljuyi  阅读(279)  评论(0)  编辑  收藏  举报