Windows 8單擊事件hander只能運行一次WinJS

我使用JavaScript和HTML5編寫Windows 8應用程序。我希望在單擊按鈕時顯示一個對話框。Windows 8單擊事件hander只能運行一次WinJS

我指定的事件處理程序在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按鈕時加載應用程序，它顯示對話框就好了。

但是，當我第二次點擊它不起作用，這就像它被遺忘的事件處理程序。

來源

2012-11-08 Luke

問題是在那裏有元素，你不需要在應用程序中，因爲你不想讓提交按鈕重新發布/重新加載頁面的表單內容。您正在有效地重新加載頁面，但在這種情況下未激活激活的處理程序（頁面作爲帖子而非請求加載），因此您將失去事件處理程序。

如果刪除元素，那麼它工作得很好。我也被告知，如果你使用type =「button」而不是type =「submit」，那麼它應該工作。但是在應用程序中，通常會從控件收集數據並將其保存在其他變量中，使用WInJS導航和頁面控制機制導航到應用程序中的另一個「頁面」，這會在不改變腳本的情況下保留在default.html中上下文。

另外，我注意到你仍然指的是WinJS的RC版本。由於Win8現在正式發佈，一定要根據系統的發佈版本和使用最新的工具進行開發。

來源

2012-11-08 18:00:28

的問題是你的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-08 18:21:12

Windows 8單擊事件hander只能運行一次WinJS

回答

相關問題