0

JavaScript と HTML5 で Windows 8 アプリケーションをコーディングしています。ボタンをクリックしたときにダイアログ ボックスを表示したい。

default.js次のように、ファイルにイベント ハンドラーを指定しました。

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.

            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {

                // Get the login button on the home page
                var login_button = document.getElementById("login_submit");

                // Set an event handler on the login button
                login_button.addEventListener("click", UserActionLogin, false);

            }));
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function UserActionLogin(mouseEvent) {

        var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
    }

    app.start();
})();

私の HTML マークアップは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

    <script type="text/javascript">

    </script>
</head>
<body>
<div id="wrapper">
    <div class="login_box">
        <form method="post">
            <input type="text" name="login_username" />
            <input type="password" name="login_password" />
            <input type="submit" id="login_submit" name="login_submit" />
        </form>
    </div>
</div>
</body>
</html>

アプリケーションのロード時にボタンをクリックするlogin_submitと、ダイアログ ボックスが正常に表示されます。

しかし、もう一度クリックしても機能しません。イベント ハンドラーのことを忘れてしまったようです。

4

2 に答える 2

1

問題は、そこに要素が含まれていることです。これは、送信ボタンでフォームの内容をページに再投稿/再読み込みしたくないため、アプリでは必要ありません。ページを効果的にリロードしていますが、その場合はアクティブ化されたハンドラーが呼び出されないため（ページはリクエストではなく投稿としてロードされます）、イベントハンドラーは失われます。

要素を削除すると、問題なく機能します。また、type="submit"の代わりにtype="button"を使用すると、機能するはずだとも言われています。ただし、アプリでは通常、コントロールからデータを収集して他の変数に保存し、WINJSナビゲーションとページコントロールメカニズムを使用してアプリ内の別の「ページ」に移動します。これにより、スクリプトを変更せずにdefault.htmlを維持できます。コンテクスト。

また、あなたはまだWinJSのRCバージョンを参照していることに気づきました。Win8は現在正式にリリースされているため、リリースされたバージョンのシステムに対して、最新のツールを使用して開発するようにしてください。

于 2012-11-08T18:00:28.293 に答える
1

問題はform、ボタンをクリックしたときに HTML がリロードされる要素の使用です。これにより、イベント ハンドラーを設定した要素が置き換えられます。つまり、その後のクリックではハンドラー関数が呼び出されません。

フォーム要素を削除すると、次のように期待どおりの動作が得られます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App7</title>

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="wrapper">
    <div class="login_box">
        <input type="text" name="login_username" />
        <input type="password" name="login_password" />
        <input type="submit" id="login_submit" name="login_submit" />
    </div>
</div>
</body>
</html>

form何らかの理由で要素が本当に必要な場合(おそらくそれを期待する JS ライブラリを使用しているなど)、次のように、イベント ハンドラー関数でフォームの送信を停止することで問題を回避できます。

function UserActionLogin(mouseEvent) {
    var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
    mouseEvent.preventDefault();
}

preventDefault を呼び出すと、フォームの投稿が停止されますが、ドキュメント内のフォーム要素を保持できます。

于 2012-11-08T18:21:12.883 に答える