Web制作の現場で使えるjQuery　UIデザイン入門 ― 第6回

jQueryのイベントをチュートリアルで学ぶ（前編）

2009年08月19日 18時46分更新

文● 西畑一馬／to-R

ダブルクリックイベントを感知する dblclick()

■dblclick()の基本の書き方

　特定の要素がダブルクリックされたときに何らかの命令を実行したい場合は、 dblclick() を利用します。記述方法は click() と同じで、括弧内に function(){..} を書き、その中に実行したい命令を記述します。


$(セレクター).dblclick(function(){
        //セレクターで指定した要素がダブルクリックされた際に実行したい命令
})

　以下のサンプルでは、button要素がダブルクリックされたときに、img要素のsrc属性の値を「sea.jpg」に、alt属性の値を「海」に書き換えます。

▼サンプル07（スクリプト部分）


$(function(){
    $("button").dblclick(function(){
            $("img").attr("src","sea.jpg").attr("alt","海");
    })
})

▼サンプル07（(X)HTML部分）


<button>画像を変更</button>
<p><img src="flower.jpg" alt="花" /></p>

▼サンプル07（実行結果）


<button>画像を変更</button>
<p><img src="sea.jpg" alt="海" /></p>

【実務でハマる落とし穴】

「a要素に設定したdblclick()がやっぱり動かない！」

　click() と同じように、 return false; も設定したのに、a要素に設定した dblclick() がうまく動かない……。

　先に説明したとおり、(X)HTMLのa要素にはもともと、href属性に書かれたリンク先に移動する働きが設定されているため、jQueryのイベント処理を設定してもうまく動作しません。そこで、click(function(){…})内の最後にreturn false;と追加し、a要素のリンク機能を無効にする必要がありました。

ところが、dblclick() の場合は、以下のように return:false; を設定してもうまく動作しません。


$(function(){
    $("a").dblclick(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
        return false;
    })
})

　dblclick()で指定した命令は、ダブルクリックが発生したタイミング（2回目のクリックの後）で初めて実行されます。一方、ブラウザーは、ユーザーがダブルクリックのつもりでクリックした1回目のクリックの後にクリックイベントを感知し、a要素のhref属性に設定されたリンクの処理を実行してしまいます。

　そこで、a要素にdblclick()を設定する場合は、メソッドチェーンを利用し、click() と dblclick() の両方のイベント処理を設定します。dblclick() にはダブルクリック時に実行したい命令を、click() に return false; を設定すれば、1回目のクリック時のリンクを無効にできます。

　次のサンプルのような書き方を覚えておくと便利です。

▼サンプル08（スクリプト部分）


$(function(){
    $("a").dblclick(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
    }).click(function(){
        return false;
    })
})

マウスのボタン操作を感知する mousedown() と mouseup()

　mousedown() と mouseup() は、特定の要素上でマウスのボタン（右ボタン、左ボタン、中ボタンなど）が押されたり離されたりしたときに、命令を実行します。

　click() と非常によく似ていますが、click() は特定の要素上にマウスカーソルがある状態で左ボタンが押され、そのままボタンが離されたときに命令を実行します。細かな違いではありますが、mousedown() ／mouseup() はドラッグ＆ドロップなどのマウスを使ったインタラクティブな操作を実現したい場合に使います。

■mousedown()

　mousedown() は、特定の要素上にマウスカーソルがある状態でマウスのボタン(右ボタン、左ボタン、中ボタンなど)が押されたときに命令を実行します。


$(セレクター).mousedown(function(){
        //セレクターで指定した要素でマウスダウンされた際に実行したい命令
})

　次のサンプルでは、a要素の上にマウスカーソルがある状態でマウスのボタンが押されたら、img要素のsrc属性とalt属性を書き換えます。

▼サンプル09（スクリプト部分）


$(function(){
    $("a").mousedown(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
    }).click(function(){
        return false;
    })
})

■mouseup()

　mouseup() は、特定の要素上にマウスカーソルがある状態で、すでに押されているマウスのボタン(右ボタン、左ボタン、中ボタンなど)が離されたタイミングで命令を実行します。


$(セレクター).mouseup(function(){
        //セレクターで指定した要素がマウスアップされた際に実行したい命令
})

　次のサンプルは、a要素の上にマウスカーソルがある状態でマウスのボタンが離されたら、img要素のsrc属性とalt属性を書き換えます。マウスのボタンをしばらく押したままにしてからボタンを離すと、mousedown() との違いが確認できると思います。

▼サンプル10（スクリプト部分）


$(function(){
    $("a").mouseup(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
    }).click(function(){
        return false;
    })
})