Обработчик событий щелчка Windows 8 работает только один раз WinJS

Я пишу приложение для Windows 8 на JavaScript и HTML5. Я хочу показать диалоговое окно при нажатии кнопки.

Я указал обработчик событий в файле 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 при загрузке приложения, диалоговое окно отображается просто отлично.

Но когда я нажимаю его во второй раз, он не работает, как будто он забыл об обработчике событий.


html winjs windows-8
person Luke    schedule 08.11.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема заключается в том, что там есть элемент, который вам не нужен в приложении, потому что вы не хотите, чтобы кнопка отправки повторно размещала/перезагружала страницу с содержимым формы. Вы фактически перезагружаете страницу, но активированный обработчик в этом случае не вызывается (страница загружается как сообщение, а не как запрос), поэтому вы теряете обработчик события.

Если удалить элемент, то он работает нормально. Мне также сказали, что если вы используете type="button" вместо type="submit", то это должно работать. Но в приложении вы, как правило, собираете данные из элементов управления и сохраняете их в других переменных, переходя на другую «страницу» в приложении, используя механизмы навигации и управления страницами WInJS, которые удерживают вас на default.html без изменения сценария. контекст.

Кроме того, я заметил, что вы все еще имеете в виду RC-версию WinJS. Поскольку Win8 официально выпущена сейчас, убедитесь, что вы работаете с выпущенной версией системы и используете самые последние инструменты.

person Kraig Brockschmidt - MSFT    schedule 08.11.2012

arrow_upward
1
arrow_downward

Проблема заключается в том, что вы используете элемент 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 останавливает отправку формы, но позволяет сохранить элемент формы в документе.

person Adam Freeman    schedule 08.11.2012