JavaScriptバグ＆回避法リスト : 3. イベント(一般)編

JavaScriptバグ＆回避法リスト

【このページ内のトピック：「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】

3.1	フレーム＋ページ内リンクでfocus移動(IE5.5,6)
3.2	フレーム＆windowのリサイズでイベント処理不安定(NS4)
3.3	windowのサイズ変更でCSSレイアウト崩壊(NS4)
3.4	ロード時にonresizeが実行される(NS4.05)
3.5	画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)

「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。

■ 3.1 フレーム＋ページ内リンクでfocus移動(IE5.5,6)

メニューフレームと本文フレームに分かれたページがあるとします。メニュフレーム内のページ内リンク「<a href=body.html#name target=body>...</a>」をクリックするとフォーカスが本文(body)側に移動してしまいます (IE4,5では大丈夫です)。

マウスによるリンククリックの代わりに Tabキーとリターンキーを使うユーザが混乱する可能性があります。

リンク先がname無しの「body.html」だとフォーカスは移動しません。

実験ページ(IE5.5,IE6で試してみて下さい)

この問題に対応したい場合はリンクの機能を使わず「<a href=body.html#name>」の代わりにJavaScriptを使って「<a href="javascript:void(0)" onclick="body.location='body.html#name'">」としたらうまく行くようです。

■ 3.2 フレーム＆windowのリサイズでイベント処理不安定(NS4)

いろいろ調べてみたところ resize時には「document.captureEvents(Event....)」の指定がクリアされるようです。その為 onresize時にそれらを再実行して解決します。

【抜粋：「きぃなび」でのWindowリサイズ時の処理】

function kl_onresize(e){ ..... kl_onresize_ex(e); if(KL_NS4) if(top!=self){ document.captureEvents(Event.KEYDOWN); document.captureEvents(Event.KEYPRESS); document.captureEvents(Event.KEYUP); document.captureEvents(Event.MOUSEDOWN); } return true; }

■ 3.3 windowのサイズ変更でCSSレイアウト崩壊(NS4)

Netscape4.xではスタイルシートの指定内容によってはレイアウトがウィンドウのリサイズにより崩れます。

style='position:absolute;'を指定している場合に頻繁に発生するようです。

NS4がある人は試してみて下さい。

style='position:absolute;'を指定したページ

さて、この問題を解決するにはページのサイズ変更時にページの内容を再読込みします。詳細は下記。

■ 3.4 ロード時にonresizeが実行される(NS4.05)

縦か横どちらかでもスクロールバーが表示されるページ (殆どのページが該当) ではロード時にonresizeが呼ばれます。先のバグ対策の為に「window.onresize=new Function('location.reload()');」などとしていると NS4.05では永遠に再読込みを続けるかその途中で「不正な処理が云々」でブラウザが異常終了します。
(4.0X系の全てはチェックしてないですが NS4.04、NS4.08でもそうなりました。)

Windows版のNS4(NS4.5,4.7なども含む)ではスクロールバーが表示されていると「window.scroll」「window.scrollBy」での移動量が正しくないという問題も発生します。
回避方法： JavaScript＠KeyNavi.Net：スクロール実行

「<body onresize='location.reload()'>」としたページ(NS4.0Xはクラッシュする可能性有り)
「window.onresize=new Function('location.reload()');」としたページ(NS4.0Xはクラッシュする可能性有り)

そこでウィンドウのサイズが実際に変更されたことを確認してから location.reload()を実行するようにします。

【実際にリサイズされた時のみ再読込み実行（NS4.0xバグ対策）】

<script language="javascript"> </script>

リサイズを確認してから再読込みするページ

KeyNaviでオプション指定

03/07/20追加

~~KeyNaviを使っている場合は「KL_RELOAD_ONRESIZE_NS4」オプションを指定すれば OKです。~~

リサイズ問題はKeyNavi側で対応 (2003/09/23追加)
NS4専用オプションは廃止し代わりに「KL_RELOAD_ONRESIZE="auto" (デフォルト)」という指定値を用意しました。ウィンドウのリサイズイベント発生時に Netscape4.x(KL_NS4) 且つレイヤーが存在する(document.layers.length>0)か調べ必要な場合に自動でページを再読み込みします。また先のNS4.0x系のバグにも対応しています。

このオプションはデフォルトで有効なため KeyNaviを採用したページではリサイズ対策が不要です。以前の「NS4」専用オプションを指定していても無視されるので問題ありません。

リサイズ時の再読み込みの是非を直接指定したい場合は「KL_RELOAD_ONRESIZE」に真か偽の値を与えて下さい。

【KeyNaviを組み込んでいる場合は自動処理されます】

<script language="javascript" src="/files/keynavi_ja.js"></script>

KeyNaviを組み込んでバグ回避したページ

■ 3.5 画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)

Netscape4.xではロジックにもよりますが設定したイベントハンドラが画像上、フォーム上できちんと動作しないことがあります。

作者が直面したケースではページ内の全てのform要素(formと各種input,textarea等)、 img要素に name属性をつけて解決できました。

例えばレイヤーに「onmousedown」ハンドラをつけた場合、マウスクリックで「mousedown」イベントが発生するはずです。しかしレイヤー内の画像をクリックした場合に動作しません。色々試したところ画像にname属性をつけたらOKでした。

NS4でイベント処理がおかしかったら試してみて下さい。

【きぃなび情報】
・ホーム
・使い方＆試す
・キー割当て表示

JavaScriptバグ＆回避法リスト目次【数字キーでアクセス】

例：「2.1節」は「2｣キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。


1.	目次


2.	基本編


3.	イベント(一般)編
3.1		フレーム＋ページ内リンクでfocus移動(IE5.5,6)
3.2		フレーム＆windowのリサイズでイベント処理不安定(NS4)
3.3		windowのサイズ変更でCSSレイアウト崩壊(NS4)
3.4		ロード時にonresizeが実行される(NS4.05)
3.5		画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)


4.	イベント(キー入力)編


5.	レイヤー編


6.	その他

■キー割当表示 [Shift-H]	─ KeyNavi：キーボードを活用してホームページを快適に─
ホーム [0] JavaScriptバグ＆回避法リスト:1.目次 [1] 3. イベント(一般)編	・サイトマップ [Shift-S]

ホーム [0] JavaScriptバグ＆回避法リスト:1.目次 [1] 3. イベント(一般)編	・サイトマップ [Shift-S]
■キー割当表示 [Shift-H]	─ KeyNavi Project 2003 ─