IEでonsubmitイベントがキャンセルできないケース
HTMLに一部のJavaScriptが直接書かれている類のアプリを、attachEventなどを駆使して一気にコントロールしようと目論んでおります。ライブラリは無し。
その過程で気づいたことをメモしておきます。
今回の話で使っているのは、IE8です。デバッグ方法については、余談をお読みください。
すべてのformのsubmitを無効にするためのスクリプトを書いてみます。
<html> <body> <form name="f0"><input name="b0" type="button" value="SUBMIT0" onclick="return this.form.submit();"></form> <form name="f1"><input name="b1" type="submit" value="SUBMIT1"></form> <form name="f2"><input name="b2" type="image" value="SUBMIT2"></form> <form name="f3"><button name="b3" type="submit">SUBMIT3</button></form> <script> function p(o) { // debug print document.title = "" + o; } var forms = document.forms; for (var i = 0; i < forms.length; i++) { forms[i].attachEvent("onsubmit", function() { p(event.srcElement.name); return false; }); } </script> </body> </html>
それぞれformとボタンが4つずつあり、ボタンを押すとsubmitされますが、attachEventで登録した関数でfalseを返すことにより、submitをキャンセルさせています。(上記の例では、送信したformが分かるように、イベントソースのformのnameをタイトルバーに表示させています。)
f1〜f3は思ったように動作しますが、f0はsubmitされてしまいます。
おそらく、これはIEの仕様のようです。(HTML4.01の場合のみ?)
詳しくは、MSDNで以下の情報が公開されています。
f0のケースはtype=submitにしてonsubmitで処理させるしかなさそうです。
なお、attachEventでは1種類のイベントに幾つも関数を登録できます。登録したのと逆の順序で実行されるようです。その関数のうち、1つでも"return false"があるとイベントがキャンセルされます。
以下、余談。
開発者ツール
IE8から、「開発者ツール」が使えるようになりました。
メニューの「ツール」から選択するか、F12キーを押すと起動します。
ステップ実行して変数が参照できたり、「常にサーバーから更新する」にしてキャッシュさせないようにしたり、何かと便利です。
タイトルバーにメッセージを出力
innerHTMLなどでページに動的に文字やタグを出力する方法もありますが、めんどっちくて都合によりそれができない場合は、タイトルバーをメッセージエリア代わりに使ってみたり。
function p(o) { // debug print document.title = "" + o + "|" + document.title; }
こういうの、昔はステータスバーを使うのが常套手段でしたね。
でも、タイトルバーも昔から使えたんですよね? もっと早く知っていれば...