JavaScript只是不重定向，而是重新加載index.html

Question

因此，我正在嘗試制作一個小的虛擬登錄表單，當我單擊一個按鈕時，它會將我重定向到另一個頁面。 但這不是，而是再次重新加載index.html。

HTML（編輯）：

<div class="modal fade" id="login" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-horizontal">
                    <div class="modal-header">
                        <h4>Log In</h4>
                    </div> <!-- End of Modal Header -->
                    <div class="modal-body">

                        <div class="form-group">

                            <label for="login-name" class="col-lg-2 control-label">Username</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="Enter Your Username" class="form-control" id="login-name">
                            </div>
                        </div> <!-- End of -->

                        <div class="form-group">

                            <label for="login-name" class="col-lg-2 control-label">Password</label>
                            <div class="col-lg-10">
                                <input type="password" placeholder="Enter Your Password" class="form-control" id="login-name">
                            </div>
                        </div> <!-- End of -->
                        <div class="form-group">

                            <button class="btn btn-default pull-right btn-large" id="loginBtn" style="margin-right: 20px;">Login</button>

                        </div> <!-- End of -->

                    </div> <!-- End of Modal Body -->
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default btn-xs">Forgot Password</a>
                        <a href="#" class="btn btn-default btn-xs">Sign Up</a>
                        <a href="#" class="btn btn-default btn-xs" data-dismiss="modal">Close</a>
                    </div> <!-- End of Modal footer -->
                </form>
            </div> <!-- End of Modal Content -->
        </div> <!-- End of Modal Dialog -->
    </div> <!-- End of Modal Fade LOGIN -->

JS：

window.addEventListener("load",init, false);

function init() {
    var loginBtn = document.getElementById("loginBtn");
    loginBtn.addEventListener("click", checkLogin, false);
}

function checkLogin(e) {
    alert("FIRED");
    if(1>0){
        window.location.href = "//www.google.com";
    }
}

起初我以為它可能沒有重定向，因為它根本沒有調用該函數，但是確實可以。 每次都會觸發警報，但隨后僅重新加載頁面。

當我告訴它在init函數中執行此操作時，它也可以重新定位。 我要去哪里錯了？

Answer 1

<button>元素的默認行為是執行提交動作。 由於您沒有取消它，因此正在提交表單，而您對location.href所做的更改將被忽略。 由於您尚未為action=""指定值，因此提交只會刷新當前頁面。

可以避免這種情況的三種不同方式：

1. 在按鈕上指定type="button" ：

<button class="btn btn-default pull-right btn-large" 
        id="loginBtn" style="margin-right: 20px;" type="button">Login</button>

2. 使用type="button"的input ：

<input class="btn btn-default pull-right btn-large" value="Login"
        id="loginBtn" style="margin-right: 20px;" type="button" />

3. 防止事件處理程序中的默認行為：

function checkLogin(e) {
    e.preventDefault();

    alert("FIRED");
    if(1>0){
        window.location.href = "//www.google.com";
    }
}

Answer 2

您還可以使用一種更簡單的方式，我更喜歡在button標簽中使用window.location.href，如下所示：

<button class="Whatever you want to call it" onclick="window.location.href='The_Page_You_Want_To_Redirect_To.html'"></button>

然后您可以根據需要使用CSS設置按鈕樣式