onclick属性

Updated / Published

onclick属性はユーザが当該要素をマウスやノートパソコン等に付属しているトラックパッドなどポインティングデバイス（pointing device）の左ボタンで押した際（左クリックを実行した時）に起動するスクリプトを指定するイベント属性（イベントハンドラ）です。また、フォームのコントロール部品の中ではフォーカス時に Enterキーを押した場合にイベントが発生します。onclick属性の操作は、ポインティングデバイス操作ができない環境でかつ指定された要素がフォーカスを得ることができない場合は無効になるので注意が必要です。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
スクリプト

ポインティングデバイス操作ができない環境における、マウスやトラックパッドの代わりにキーボードのみで操作することできるように配慮するため、onclick属性は onkeypress属性とセットで使うことが求められています。しかし、onkeypress属性を指定すると Tabでフォーカスを移動しているときに、Tab の押下に反応し、onkeypress属性のイベントを優先的に発生させてしまう実装をした UA もあり、次の要素へフォーカスを移したくても、Tab の押下でイベントが発生してしまって、移動ができなくなるようなケースもあります。

そのため、要素がフォーカスされている時は、キーボードの Enterキーでポインティングデバイスの左ボタンと同じ働きができるので、選択可能な状態（フォーカス）になる a要素, area要素、そしてフォームのコントロール部品である button要素, input要素, label要素, option要素, select要素, textarea要素に対象を限って onclick属性を使用するのであれば、onkeypress属性を併せて指定する必要はなく、それ以外の要素には、現在どの UA もまだフォーカスを得ることができないため、onclick属性を使わないようにしましょう。

結論としては、onclick属性とonkeypress属性は併用しない、onclick属性を使うのは、ポインティングデバイス操作ができなくとも Tabキーと Enterキーの組み合わせで操作が可能なa要素, area要素, button要素, input要素, label要素, option要素, select要素, textarea要素に限定するという使い方がベターです。

また、onclick属性と同じ左ボタンの押下の動作によりイベントを発生させる属性に他に onmousedown属性, onmouseup属性があります。これらの属性を onclick属性と併せてひとつの要素に指定している場合、イベントは onmousedown属性→onmouseup属性→onclick属性の順に発生します。

onclick属性を指定できる要素型

A
B
C
D
E
F
H
I
K
L
M
N
O
P
Q
R
S
T
U
V

onclick属性のサンプル

次のスクリプトでは、プルダウンメニューからジャンプ先を選択し、実行ボタンが押されると指定されたページにジャンプします。プルダウン式メニューは表示領域を抑える手段として有効です。たとえば、ブログのサイドメニューに記事を年月別にわけたリンクを用意している場合、月日が経つごとに段々とリンクが増えてきて場所を取るようになるので、次のようにプルダウンメニューを使用するのは有効でしょう。逆に重要なナビゲーション部分をこのようなクライアントサイドスクリプトで提供してしまうと、JavaScript が利用できない・無効にしている環境では、利用できないので注意してください。

<script type="text/javascript">
function selectmenu(linkLoc) {
if(linkLoc) { window.location.href=linkLoc;} }
</script>
......
<form name="sample"><p>
Aからはじまる要素一覧: <select name="ListMenu">
<option value="" selected="selected">選択してください</option>
<option value="a.html">a要素</option>
<option value="abbr.html">abbr要素</option>
<option value="acronym.html">acronym要素</option>
<option value="address.html">address要素</option>
<option value="applet.html">applet要素</option>
<option value="area.html">area要素</option></select>
<input type="button" value="実行"
onclick="selectmenu(document.sample.ListMenu.options
[document.sample.ListMenu.selectedIndex].value)">
</p></form>