argius note

プログラミング関連

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;
}

こういうの、昔はステータスバーを使うのが常套手段でしたね。
でも、タイトルバーも昔から使えたんですよね? もっと早く知っていれば...