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

「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; が忘れずに設定されているか、確認してください。