jQuery Mobileのイベント処理 (2/6)
作成:2011-06-13 07:46
更新:2012-03-29 10:24
更新:2012-03-29 10:24
■タップと長押し
普通、クリックしたときのイベント処理は「click」ですが、実はjQuery Mobileにはこれとは別に「タップしたときのイベント」として「tap」というものも用意されています。今度は、これを利用してみましょう。
clickとtapは何が違うのか。……さあ（笑）。普通にPCでアクセスしてもマウスでクリックすればtapのイベントが動きますし、ほとんど違いはないようですね。まぁ、気分的にはtapを使ったほうがスマートな感じはするでしょう。
jQuery Mobileのタップ処理は、「tapとイベントを指定してもclickと同じように動く」というだけではなく、実はもう１つあります。それは「長押し」イベントです。iPhoneやAndroidでは、ボタンなどを長く押し続けることでタップとは別の機能を呼び出すことができます。この長押しのイベントがjQuery Mobileにはちゃんと用意されているのです。
「taphold」というのが、長押しのイベント名です。では、tapとtapholdの両方を使った例を下のリスト欄にあげておきましょう。普通にタップすると「btn1にタッチしたぞ！」と表示されますが、ボタンを押し続けていると、（離さなくても一定時間が経過すると）「btn1を長押ししたぞ！」と表示されます。
実際に操作してみると、長押ししたときには、tapholdイベントが発生し、その後で離すとtapイベントも発生することがわかります。従って、「長押ししたときは、tapの処理は実行させない」というような場合には、長押ししたかどうかを何らかの形でチェックできるようにしておく必要があるでしょう。
clickとtapは何が違うのか。……さあ（笑）。普通にPCでアクセスしてもマウスでクリックすればtapのイベントが動きますし、ほとんど違いはないようですね。まぁ、気分的にはtapを使ったほうがスマートな感じはするでしょう。
jQuery Mobileのタップ処理は、「tapとイベントを指定してもclickと同じように動く」というだけではなく、実はもう１つあります。それは「長押し」イベントです。iPhoneやAndroidでは、ボタンなどを長く押し続けることでタップとは別の機能を呼び出すことができます。この長押しのイベントがjQuery Mobileにはちゃんと用意されているのです。
「taphold」というのが、長押しのイベント名です。では、tapとtapholdの両方を使った例を下のリスト欄にあげておきましょう。普通にタップすると「btn1にタッチしたぞ！」と表示されますが、ボタンを押し続けていると、（離さなくても一定時間が経過すると）「btn1を長押ししたぞ！」と表示されます。
実際に操作してみると、長押ししたときには、tapholdイベントが発生し、その後で離すとtapイベントも発生することがわかります。従って、「長押ししたときは、tapの処理は実行させない」というような場合には、長押ししたかどうかを何らかの形でチェックできるようにしておく必要があるでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>Sample</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$('#home').live('pagecreate',function(){
$('#btn1').live('tap',doAction);
$('#btn1').live('taphold',doAction2);
});
function doAction(){
$('#msg').text($(this).attr('id') + "にタッチしたぞ！");
}
function doAction2(){
$('#msg').text($(this).attr('id') + "を長押ししたぞ！");
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Hello</h1>
</div>
<div data-role="content">
<p id="msg">※サンプル。</p>
<div data-role="fieldcontain">
<input type="button" name="btn1" id="btn1" value="Click" />
</div>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る