脳log[20060713] <a href="javascript:void(0)"> と自分で書いて初めて気付くその便利さ

♪ [HTML] <a href="javascript:void(0)"> と自分で書いて初めて気付くその便利さ

onclickでごにょごにょする HTML要素があって、そいつに Tabキーでフォーカスをあてたいなと思ったときに最初に思いついたのが

<a href="javascript:void(0)">ほげほげ</a>*

のように Aタグで囲う方法。遅まきながら、この時初めてステータスバーに javascript:void(0)と表示される何もしないリンクの存在意義に気付いた。こいつがあると Tabキーでフォーカスをあてられるし、Enterキーでクリックすることもできる。そしてスクリプト(onclickハンドラ)で処理できる。簡単かつ使える範囲の広い方法。javascriptを切ってるブラウザではそもそも onclickハンドラが動かないから javascriptスキーマを使うことの是非は問われないし。onclickハンドラでキーボードとマウスをまとめて処理できることや、対応するブラウザの多さなど、書けば書くほどこれしかないって思えてくる。

次に考えついたのが、9日に "tabindexはフォーカスの順番を決めるだけのものではないのだなぁ。" と書いたように、IE(>=5.0)や Firefox1.5で、tabindexを付けることでリンクやフォームの部品以外の要素をフォーカス可能にする方法。

IEの場合、

<element>.tabIndex = 0 // 0 => フォーカス可能にはするが、タブオーダーは指定しない
<element>.onkeypress = function(){ if(event.keyCode == 13) this.click() } // Enter->Click

で済むが、Firefoxの場合 click()が実装されてるエレメントがフォームの部品などに限られているので

<element>.tabIndex = 0 // 同上
<element>.onkeypress = function(event){
  if(event.keyCode == 13) {
    var event2 = document.createEvent("MouseEvents");
    event2.initMouseEvent("click", true, true, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null);
    this.dispatchEvent(event2);
  }
}

と、かなり冗長。