Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも……。
 |
JavaScriptの動作に関係なくページが移動する |
 |
マウスクリックからJavaScriptを動作させたいとき、「a href="#"onclick="windowopen（）;"」といった空のリンクを設定してはいないだろうか？ この場合、このa要素をクリックするとJavaScriptは動作するものの、Webページがスクロールしている場合は、ページの先頭に移動してしまう。a要素は、この要素でくくられた内容をクリックすることでhrefの値を参照するため、「#」を記述しているとそれを参照してしまうのである。
a要素を使ってJavaScriptを動作させる場合は「a href="javascript:windowopen（）;"」と記述しよう。こうすることでクリック自体がJavaScriptを参照する。イベントハンドラを使った記述の場合は、a要素を使わず、別の要素に「onclick」を組み込めばよい【1】。ただし、これではマウスカーソルのアイコンが指先アイコンに変化しないため、クリックできることを視覚的に伝えることができなくなるだろう【2】。
【1】a要素でない要素にイベントハンドラを用いてJavaScriptを動作させることもできる
【2】マウスカーソルが指のマークにならないのでクリックできるかどうか、わかりづらい
文＝DtoP
Profile／企画段階からのサイト構築、CGI、デザイン、コーディングやFlashコンテンツ制作、携帯向けサイトなどWebサービスを日々追求しております。www.dtop.jp/
（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）
【落とし穴一覧】へ戻る
