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

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

イベントの基本をクリックで学ぶ

■click()の基本の書き方

　特定の要素がクリックされたときに何らかの命令を実行したい場合は、click() を使います。よく使う命令ですので、click() を例に、イベントの基本を学んでいきましょう。

　click() は、ready() と同様に括弧内に function(){...} と記述し、その内側に実行したい命令を記述します。

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

　具体的なサンプルプログラムを見てみましょう。下記のコードを実行すると、button要素がクリックされたときに、img要素のsrc属性の値が「sea.jpg」に、alt属性の値が「海」に書き換わります。attr()は、,(カンマ)区切りで指定した属性値を変更する命令でしたね（関連記事）。

　サンプルでは、複数の命令を.（ドット）でつないで連続して実行する「メソッドチェーン」の仕組みを使って、src属性とalt属性を一度に書き換えています（メソッドチェーンについては第5回を参照）。

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

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

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

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

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

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

サンプル01の実行画面。button要素をクリックするとimg要素のsrc属性とalt属性が書き換わる

　このように、指定した要素がクリックされ、クリックイベントが発生したときの処理を記述できるのが、click() です。

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

「a要素に設定したクリックイベントの処理が動かない！」

　click()は、セレクターでさまざまな(X)HTML要素を指定できますが、もともと「クリックされるとhref属性に書かれたリンク先に移動する」働きが設定されているa要素を指定した場合はどうなるでしょうか？　

　a要素にdblclick()を設定する場合には、実はもう一工夫必要です。サンプルを見てみましょう。

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

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

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

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

　このコードをブラウザーで開いてa要素をクリックしてみると、クリックイベントが発生し、jQueryの命令が実行されます。ところが次の瞬間には、イベントの発生を感知したWebブラウザーは、a要素のhref属性に設定されたリンク先のURLを開いてしまいます。

　問題を回避するにはいくつかの方法があります。

■その1．javascript:void(0)を使う

　ひとつは、a要素のhref属性に javascript:void(0) と設定し、a要素の機能を殺してしまう方法です。

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

<a href="javascript:void(0)">画像を変更</a>
<p><img src="flower.jpg" alt="花" /></p>

　これでjQueryの命令だけが実行され、リンク先に移動しなくなります。

　ただ、javascript:void(0) を使うと、ユーザーがJavaScriptをオフにしている場合、リンクをクリックしても何も変化が起きないため、混乱してしまう恐れがあります。JavaScriptを使う場合は、JavaScriptオフの環境にもなるべく配慮するべきです。

■その2．return false; を追加する

　もう1つは、クリックイベントの最後に return false; と記述する方法です。

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

$(function(){
    $("a").click(function(){
            $("img").attr("src","sea.jpg").attr("alt","海");
            return false;
    })
})

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

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

　この場合も、a要素がクリックされた際にはjQueryの命令だけが実行され、href属性に設定されたリンク先には移動しません。一方、JavaScriptがオフの場合はa要素のリンクが有効になるので、jQueryの命令で指定している内容に近いURLをhref属性に設定しておけば、ユーザーはとりあえず最低限の情報をつかめます。

　「a要素に設定したイベント処理がうまく動かない」––そんなときは return false; が忘れずに設定されているか、確認してください。