＜input type="image"＞は、グラフィカルなsubmitボタン

JavaScript HTML

最近ハマった問題。

【問題】
　◆予期せぬ画面リロードが発生する。

【原因】
　◆＜input type="image"＞タグをクリックした際に発生するクリックイベントを拾って、window.showModalDialogを起動していること。

<head>
 <script type="text/javascript">
   $(function(){
    $("#imageId").click(function(){
        window.showModalDialog(uri, arguments, options);
    });
   });
 </script>
</head>

<body>
 <form>
  <input id="imageId" type="image" src="画像のソース"/>
 </form>
</body>

下記シーケンスにより画面がリロードされる。

①inputタグで表示された画像をクリック
②クリックイベントが発生
③window.showModalDialogメソッドが実行される。この時、window.showModalDialog実行元の画面の処理は停止し、モーダルな画面へ処理が移る
④モーダルなポップアップ画面を閉じる。この時、window.showModalDialog実行元の画面の処理が再開する
⑤type属性の値がimageであるinputタグはsubmitボタンであるため、＜input type="image"＞によるsubmitが発生する（画面がリロードされる）。

【解決案】
・＜input type="image"＞を使用しない。
代わりに、＜a href="#"＞＜img src="" alt=""＞＜/a＞を使用する。

【参照サイト】
・http://support.microsoft.com/kb/822276/ja
・http://www.w3.org/TR/html4/interact/forms.html