移动互联网是未来的发展趋势，现在国内很多互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，当然还有各种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文件
<!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事件,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/qiheng/p/3764837.html
