首页 > 代码库 > touchstart和touchend事件
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文件
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://www.mamicode.com/touchEvent.js"></script> </head> <body> <input type="button" class="button" value="http://www.mamicode.com/button" /> <script type="text/javascript"> $(‘.button‘).on(‘tap‘, function(e) { e.preventDefault(); alert(‘tap‘); }).on(‘tapend‘, function(e) { alert(‘tapend‘); }); </script> </body> </html>
以上,就是在学习移动端事件的小小成果。移动端的知识不比pc简单,所以要有耐心去学习,知识才会一点点的积累。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。