touchstartとtouchendイベント
3112 ワード
モバイルインターネットは未来の発展傾向であり、現在、国内の多くのインターネットの大物がモバイルという餅を勝ち取っている.例えば、微信や支付宝は現在比較的成功している例であり、もちろん各種アプリやweb運用もある.
会社のニーズで、最近もモバイルウェブを開発していますが、モバイル開発の経験がない人にとっては、実は困っていることです.モバイルWeb開発では現在、主にwebkitカーネルベースのブラウザが開発されています.Webkitカーネルの環境で開発すると、html 5+css 3、そしてそのいくつかのプライベート属性を十分に運用することができます.これは私を興奮させた.しかし、結局、PC端が固定画素開発を行うのに長い間慣れていた先端が、突然移動端になってhtml 5+css 3や応答式開発を運用するのは、ちょっと慣れていない.ましてや移動するタッチイベントやタッチジェスチャーなどは言うまでもありません.これらは素人にとっては少しぼんやりしている.
しかし、知識にはいつも熟知した過程があり、私もモバイルwebの開発技術をマスターできると信じています.次はモバイル側の軽いタッチイベントの勉強です.しかし、モバイル開発の経験がある人にとって、次の私が書いた知識は浅いかもしれません.そうすれば、この文章をスキップすることができます.私と同じように基礎がないので、よく読むことができます.
Webkit内のタッチイベントは主に以下の通りである:touchstart---->タッチ開始touchmove----->タッチポイント変更touchend----->タッチ終了touchcancel----->タッチキャンセル
以下、私は主に私が日常的に使っている多くのtouchstart、touchendの2つのイベントをパッケージして、jQueryクラスライブラリのように使いやすいようにします.
コードは次のとおりです.
まずはtouchEvent.jsファイル
次に、jsファイルをページで参照します.
以上,移動端イベントを学習した小さな成果である.モバイル側の知識はpcより簡単ではないので、辛抱強く勉強しなければならないので、知識は少しずつ蓄積されます.
会社のニーズで、最近もモバイルウェブを開発していますが、モバイル開発の経験がない人にとっては、実は困っていることです.モバイルWeb開発では現在、主にwebkitカーネルベースのブラウザが開発されています.Webkitカーネルの環境で開発すると、html 5+css 3、そしてそのいくつかのプライベート属性を十分に運用することができます.これは私を興奮させた.しかし、結局、PC端が固定画素開発を行うのに長い間慣れていた先端が、突然移動端になってhtml 5+css 3や応答式開発を運用するのは、ちょっと慣れていない.ましてや移動するタッチイベントやタッチジェスチャーなどは言うまでもありません.これらは素人にとっては少しぼんやりしている.
しかし、知識にはいつも熟知した過程があり、私もモバイルwebの開発技術をマスターできると信じています.次はモバイル側の軽いタッチイベントの勉強です.しかし、モバイル開発の経験がある人にとって、次の私が書いた知識は浅いかもしれません.そうすれば、この文章をスキップすることができます.私と同じように基礎がないので、よく読むことができます.
Webkit内のタッチイベントは主に以下の通りである:touchstart---->タッチ開始touchmove----->タッチポイント変更touchend----->タッチ終了touchcancel----->タッチキャンセル
以下、私は主に私が日常的に使っている多くのtouchstart、touchendの2つのイベントをパッケージして、jQueryクラスライブラリのように使いやすいようにします.
コードは次のとおりです.
まずはtouchEvent.jsファイル
(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より簡単ではないので、辛抱強く勉強しなければならないので、知識は少しずつ蓄積されます.