2012-11-08 4 views
0

JavaScript 및 HTML5로 Windows 8 애플리케이션을 코딩하고 있습니다. 버튼을 클릭 할 때 대화 상자를 표시하고 싶습니다.Windows 8 클릭 이벤트 핸들러는 한 번만 작동합니다. Win32S

내가 지금처럼 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 버튼을 클릭하면 대화 상자가 정상적으로 작동합니다.

하지만 두 번째로 클릭하면 작동하지 않지만 이벤트 처리기는 잊어 버린 것 같습니다.

답변

1

문제는 응용 프로그램에서 필요하지 않은 요소가 있다는 것입니다. 제출 버튼을 다시 게시/양식 내용으로 페이지를 다시로드하지 않으려 고하기 때문입니다. 효과적으로 페이지를 다시로드하지만 활성화 된 핸들러가 호출되지 않으면 (페이지가 요청이 아닌 게시물로로드 됨) 이벤트 핸들러를 잃게됩니다.

요소를 삭제하면 올바르게 작동합니다. 또한 type = "button"대신 type = "submit"을 사용하면 제대로 작동한다고 들었습니다. 그러나 앱에서 일반적으로 컨트롤에서 데이터를 수집하고이를 다른 변수에 저장하고 WInJS 탐색 및 페이지 제어 메커니즘을 사용하여 앱의 다른 "페이지"로 이동하여 스크립트를 변경하지 않고 default.html을 유지합니다 문맥.

또한 저는 여전히 RC 버전의 WinJS를 언급하고 있습니다. Win8이 공식적으로 발표 되었기 때문에 출시 된 시스템 버전과 최신 도구를 사용하여 개발해야합니다.

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> 

을 당신이 정말로 (당신이 그것을 예상하는 JS 라이브러리를 사용하고 아마도 때문에) 어떤 이유로 form 요소를해야하는 경우 다음과 같이

, 폼 요소를 제거하고 당신은 당신이 기대하는 행동을 얻을 것이다 다음과 같이, 당신은, 당신의 이벤트 핸들러 함수에 제출되는 양식을 중지하여 문제를 방지 할 수 있습니다

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를 호출하면 게시 된 양식을 중지하지만 문서의 양식 요소를 유지할 수 있습니다.

관련 문제