| « 更新履歴 2008/02/14 | IEs4Linuxを使ってみた » |
onclick メモ
Another HTML Lintで、HTMLの文法をチェックすると、onclick属性を指定した場合、同時にonkeypress属性を指定していないと、
onclick 属性を使うときは onkeypress 属性も指定しましょう。 → 解説 150
と怒られる。
この解説には、
スクリプトのイベント処理では、装置非依存性を確保するために、次の属性は対で使用するように、アクセス指針技術文書4.12.2(J)で薦められています。
onmousedown + onkeydown onmouseup + onkeyup onclick + onkeypress
とあり、根拠の文書にも、
- Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
- Use "onmousedown" with "onkeydown".
- Use "onmouseup" with "onkeyup"
- Use "onclick" with "onkeypress"
Note that there is no keyboard equivalent to double-clicking ("ondblclick") in HTML 4.01.
そう書いてある。
だから、今までonclick属性を指定した時、無批判に、なるべく、onkeypress属性も指定することにしていた（基本的に、PCしか閲覧環境を想定していないけど。しかし、そうすると、TABを押してフォーカスを移そうとした場合でも、KeyPressイベントが発生してしまい、特定のキーコードが押された場合には無視するようにフィルタをかける必要がある）。
しかし、先日、JavaScript 第5版を読んでいると、p.408頁に、
「mouse」や「key」という言葉が含まれるイベントは、名前からわかるように、デバイス依存イベントです。これらのイベントを使う場合は、マウスでもキーボードでも操作できるように、両方のイベントハンドラを使用するようにしてください。onclickイベントはデバイス独立イベントと考えられることに注意してください。フォームコントロールやハイパーリンクをキーボードで操作した場合でも、このイベントが発生します。したがって、マウスに依存したイベントではありません。
と書いてあった。
試しに、
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
<title>click events test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
</head>
<body id="top">
<form action="#top">
<p><input tabindex="1" type="submit" onclick="alert('form clicked'); return false;" /></p>
</form>
<p><a tabindex="2" href="#top" onclick="alert('link clicked'); return false;">link</a></p>
</body>
</html>
というサンプルを書いて*1、手元の環境で実験してみたら、
| Form item | Link item | |||
|---|---|---|---|---|
| Enter | Space | Enter | Space | |
| ○はイベント発生、×は発生しない | ||||
| Firefox 2.0.0.12 | ○ | ○ | ○ | × |
| Opera 9.25 | ○ | ○ | ○ | × |
| Konqueror 3.5.8 | ○ | ○ | ○ | × |
| IE6 | ○ | ○ | ○ | × |
という結果に。
確かに、Enterキーを押した場合では、フォームコントロールでもリンクでも、クリックイベントが発生している。
（もちろん、上記サンプルは、Another HTML Lintでは減点されるんだけど）
- *1
tabindex属性をつけているのは、Operaだと、なぜかそうしないと、TABキーを押した時、リンク部分にフォーカスが移らなかったため。
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
Feedback awaiting moderation
This post has 5 feedbacks awaiting moderation...
Comment feed for this post