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

相關標籤/搜索

touchstart+touchmove+touchend

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。