touchstart和touchend事件

Posted yangboom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了touchstart和touchend事件相关的知识,希望对你有一定的参考价值。

移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用。

由于公司的需要,最近也在开发移动web,对于一个没有移动开发经验的人来说,其实也是比较困恼的一件事情。对于移动web开发目前主要是基于webkit内核的浏览器。在webkit内核的环境下开发,你可以充分的运用html5+css3,还有它的一些私有属性。这让我很兴奋。可是,毕竟,对于一个长期习惯pc端做固定像素开发的前端,突然转为移动端运用html5+css3及响应式开发,还真有点不适应。更不用说移动的一些触摸事件及一些触摸手势之类。这些对于一个门外汉来说还真有点蒙。

不过,知识总是有个熟悉的过程,我也相信自个能学好移动web的开发技术。下面是我对移动端的一些轻触事件的学习。不过对于有移动开发经验的人来说,下面我写的知识可能比较肤浅,这样的话,你可以跳过本文章;对于和我一样没啥基础的,可以好好阅读完。

在webkit内的触摸事件主要有以下几个:
touchstart---->触摸开始
touchmove----->接触点改变
touchend------>触摸结束
touchcancel--->触摸取消

下面我主要针对我日常用的比较多的touchstart,touchend两个事件进行封装,使得其像jQuery类库一样方便使用。

代码如下:

首先是touchEvent.js文件

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
(function(window, undefined){
     
    var TOUCHSTART, TOUCHEND;
     
    if (typeof(window.ontouchstart) != \'undefined\') {
         
        TOUCHSTART = \'touchstart\';
        TOUCHEND   = \'touchend\';
         
    } else if (typeof(window.onmspointerdown) != \'undefined\') {
        TOUCHSTART = \'MSPointerDown\';
        TOUCHEND   = \'MSPointerUp\';
    } else {
        TOUCHSTART = \'mousedown\';
        TOUCHEND   = \'mouseup\';
    }
     
     
    function NodeFacade(node){
         
        this._node = node;
         
    }
     
    NodeFacade.prototype.getDomNode = function() {
        return this._node;
    }
     
    NodeFacade.prototype.on = function(evt, callback) {
         
        if (evt === \'tap\') {
            this._node.addEventListener(TOUCHSTART, callback);
        } else if (evt === \'tapend\') {
            this._node.addEventListener(TOUCHEND, callback);
        } else {
            this._node.addEventListener(evt, callback);
        }
         
        return this;
         
    }
     
    NodeFacade.prototype.off = function(evt, callback) {
        if (evt === \'tap\') {
            this._node.removeEventListener(TOUCHSTART, callback);
        } else if (evt === \'tapend\') {
            this._node.removeEventListener(TOUCHEND, callback);
        } else {
            this._node.removeEventListener(evt, callback);
        }
         
        return this;
    }
     
    window.$ = function(selector) {
 
        var node = document.querySelector(selector);
 
        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }
 
})(window);

  其次在页面中引用该js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="touchEvent.js"></script>
</head>
<body>
    <input type="button" class="button" value="button" />
    <script type="text/javascript">
        $(\'.button\').on(\'tap\', function(e) {
            e.preventDefault();
            alert(\'tap\');
        }).on(\'tapend\', function(e) {
            alert(\'tapend\');
        });
    </script>
</body>
</html>

 以上,就是在学习移动端事件的小小成果。移动端的知识不比pc简单,所以要有耐心去学习,知识才会一点点的积累。

以上是关于touchstart和touchend事件的主要内容,如果未能解决你的问题,请参考以下文章

移动端事件(touchstart+touchmove+touchend)

javaScript -- touch事件详解(touchstarttouchmove和touchend)

javaScript -- touch事件详解(touchstarttouchmove和touchend)

手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果

javaScript-touch事件详解(touchstarttouchmove和touchend)-滑动事件案例

获取touchstart,touchmove,touchend 坐标