touchstart和touchend事件

时间 2019-11-09

标签 touchstart touchend 事件繁體版

原文原文链接

移动互联网是将来的发展趋势，如今国内不少互联网大佬都在争取移动这一块大饼，如微信及支付宝是目前比较成功的例子，固然还有各类APP和web运用。javascript

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

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

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

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

代码以下：java

首先是touchEvent.js文件node

(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文件css3

<!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简单，因此要有耐心去学习，知识才会一点点的积累。web