Question

我正在用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按钮时，它会显示对话框。

但是当我第二次点击它时它不起作用，就像忘记了事件处理程序一样。

Answer 1

问题是在那里有元素，你在应用程序中不需要，因为你不希望让提交按钮重新发布/重新加载带有表单内容的页面。您正在有效地重新加载页面，但在这种情况下不会调用激活的处理程序（页面作为帖子而不是请求加载），因此您将丢失事件处理程序。

如果删除元素，那么它可以正常工作。我也被告知，如果你使用type =“button”而不是type =“submit”那么它应该可行。但是在应用程序中，您通常会从控件中收集数据并将其保存在其他变量中，使用WInJS导航和页面控制机制导航到应用程序中的另一个“页面”，这样您就可以在不更改脚本的情况下使用default.html上下文。

另外，我注意到你仍然指的是WinJS的RC版本。由于Win8现已正式发布，请务必针对已发布的系统版本进行开发，并使用最新的工具。

Answer 2

问题是您使用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的调用会停止发布的表单，但允许您将表单元素保留在文档中。

Windows 8点击事件处理程序仅适用于WinJS

2 个答案: