ひさしぶりにJavascriptを使って、何も覚えていないことにぞ驚かれぬる

ハマり javascript

Javascriptのイベント処理の常識がすっかりアルツ orz...

Aタグの動作(ページ遷移)を打ち消すために、onclickなどのハンドラでfalseを返す

これ、IEでは常識の域だったらしいが、すっぱり忘れてました。
参照：JavaScriptのSubmitが出来ない − Insider.NET − ＠IT

onChangeとonClickがカブると、onChangeが優先されてしまうことがある（詳細は未確認）

たとえば、

  • inputフィールドに文字列を入力させてonChangeイベントで入力データの判定を行う
  • ラジオボタンのonClickイベントで、フォームの状態を変化させる

といったフォームを作ったとする。
inputフィールドに文字列を入力した直後にラジオボタンをクリックしたらどうなるか？

  1. onChangeイベントとonClickイベントがそれぞれ起きる
  2. onChangeイベントだけ起きる
  3. onClickイベントだけ起きる

私の手元にあるブラウザ(Firefox3, IE7)では、１）のケースだった。
これはアカンわなー、ということで、直すのだが、スクリプトのロジックを変えたくなかったので、inputフィールドの値のチェックはonKeyUpイベントで処理することにした。これなら被らない、よね。

参考：Document Object Model Events
↑の資料によれば、onChangeはinputのフィールドからfocusが外れたときに起きるのだから、onClickと被るはずがないのだけど。。。うーむ。変だ。

フォームに入力中にENTERキーを押すとsubmitと解釈するブラウザがある

そういう解釈を避けるために、formのアクションに"#"を指定したりする。

<form action="#" onSubmit="return(false);">

参考：掲示板/JavaScript質問板［過去ログ］/一覧/Opera で onChangeが利かない - TAG index Webサイト

(11/14追記)どうせだから、isdefinedの処理も参考にしたところを載せておこう

楽天が運営するポータルサイト ： 【インフォシーク】Infoseek
いや、ちゃんとしたリファレンスを手元に置いとけって話ですけど（汗 現場にはなかなか持っていけないので、つぎはぎの状態でメモが集積していってしまうんですなぁ。とりあえずjavascriptのカテゴリーを付けてみた。