回答:
Core jQueryにはタッチイベント用の特別なものはありませんが、次のイベントを使用して簡単に独自のイベントを作成できます
たとえば、 touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
これは、ほとんどのWebKitベースのブラウザー(Androidを含む)で機能します。
jQuery 1.7以降を使用している場合、他のすべての回答よりもさらに簡単です。
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
$('#whatever').on('touchstart click', function(){ /* do something... */ });
$('#whatever').on({ 'touchstart' : function(ev){}});
、ev
タッチ(タッチ、targetTouchesまたはchangedTouches)に関するすべての情報を持っていないようだ
ev.originalEvent
ます。
最も簡単な方法は、Hammer.jsのようなマルチタッチJavaScriptライブラリを使用することです。次に、次のようなコードを記述できます。
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
そして、あなたは続けることができます。タップ、ダブルタップ、スワイプ、ホールド、変形(ピンチ)、ドラッグをサポートしています。タッチイベントは、同等のマウスアクションが発生したときにも発生するため、2組のイベントハンドラーを記述する必要はありません。ああ、そして私がしたようにjQueryishの方法で書けるようにしたいなら、jQueryプラグインが必要です。
タッチスタートまたはタッチエンドを単独で使用することは適切な解決策ではありません。ページをスクロールすると、デバイスはタッチまたはタップとしてもそれを検出するためです。したがって、タップとクリックのイベントを同時に検出する最良の方法は、画面を移動していない(スクロール)タッチイベントを検出することです。これを行うには、次のコードをアプリケーションに追加します。
$(document).on('touchstart', function() {
detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true; // Detects click events
if (detectTap){
// Here you can write the function or codes you want to execute on tap
}
});
私はそれをテストしました、そしてそれはiPadとiPhoneで私のためにうまく働きます。タップを検出し、タップとタッチスクロールを簡単に区別できます。
jQuery Coreには特別なものはありませんが、jQuery Mobile Eventsで読むことができますページでさまざまなタッチイベントについてます。これらのタッチイベントは、iOSデバイス以外でも機能します。
彼らです:
また、スクロールイベント中(モバイルデバイスのタッチに基づく)、iOSデバイスはスクロール中にDOM操作をフリーズします。
私は少しだけ使用して心配していたtouchmoveそれだけで火にいるようだから、私のプロジェクトのためのとき、ある場所から別の場所にあなたのタッチが移動(とない初期touch上)。だから私はそれをtouchstartと組み合わせました、そしてこれは最初のタッチとどんな動きにもとてもうまくいくようです。
<script>
function doTouch(e) {
e.preventDefault();
var touch = e.touches[0];
document.getElementById("xtext").innerHTML = touch.pageX;
document.getElementById("ytext").innerHTML = touch.pageY;
}
document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
</script>
X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
jQueryのバージョン1.4と1.7+の両方でベンマジョールのGitHub jQuery Touch Eventsプラグインをテストしました。それは軽量で、両方on
で完璧に動作し、完全bind
な一連のタッチイベントをサポートします。