Javascript onclick（）需要兩次點擊

Question

我有三個按鈕，每個按鈕調用chooseMap()函數onclick ，然后根據按鈕id將用戶重定向到新頁面。 一切正常但我每次都要點擊兩次。 誰能告訴我為什么會這樣，以及我如何解決它？

<div class="row text-center" onclick="chooseMap();">
  <div class="col-md-4">
      <button type="button" class="btn btn-primary" id="world" >World Map</button>
  </div>
  <div class="col-md-4">
    <button type="button" class="btn btn-primary" id="europe">Europe</button>
  </div>
  <div class="col-md-4">
    <button type="button" class="btn btn-primary" id="sweden">Sweden</button>
  </div>
</div> 

function chooseMap(){
  $(document).ready(function() {
    document.getElementById("sweden").onclick = function(){
      location.href = "map_game/sweden.html";
    }
    document.getElementById("europe").onclick = function(){
      location.href="map_game/europe.html";
    }
    document.getElementById("world").onclick = function(){
      location.href="map_game/world.html";
    }
  })
} 

一切正常。 我點擊按鈕，調用函數，傳遞正確的字符串，我很高興地發送到下一頁，一切都有效。 但是，我必須在按鈕上單擊兩次才能使其正常工作。 我第一次點擊沒有任何反應。 有什么想法嗎？

我已經在Stack Overflow上研究了這個問題但是無法通過這個和這個問題解決我的問題。

Answer 1

問題是因為第一次單擊執行chooseMap函數，然后附加事件處理程序。 然后第二次單擊執行在這些事件處理程序中分配的代碼。

要修復和改進代碼，請刪除內聯onclick屬性並使用jQuery附加事件。 嘗試這個：

<div class="row text-center">
    <div class="col-md-4">
        <button type="button" class="btn btn-primary" id="world">World Map</button>
    </div>
    <div class="col-md-4">
        <button type="button" class="btn btn-primary" id="europe">Europe</button>
    </div>
    <div class="col-md-4">
        <button type="button" class="btn btn-primary" id="sweden">Sweden</button>
    </div>
</div>

$(document).ready(function() {
    $("#sweden").click(function() {
        window.location.assign('map_game/sweden.html');
    });
    $("#europe").click(function() {
        window.location.assign('map_game/europe.html');
    });
    $("#world").click(function() {
        window.location.assign('map_game/world.html');
    });
});

請注意，您甚至可以通過使用DRY原則進一步改進這一點，您可以使用基於button元素class的單個處理程序，並使用按鈕的id設置URL，如下所示：

$(document).ready(function() {
    $(".btn").click(function() {
        window.location.assign('map_game/' + this.id + '.html');
    })
});

Answer 2

使用jQuery進行事件處理，無論如何你都在使用它：

$(document).ready(function () {
    $('#sweden').on('click', function () {
        location.href = "map_game/sweden.html";
    });
    $('#europe').on('click', function () {
        location.href = "map_game/europe.html";
    });
    $('#world').on('click', function () {
        location.href = "map_game/world.html";
    });
});

Answer 3

<div class="row text-center" onclick="chooseMap();">
    <div class="col-md-4">
        <a href="map_game/sweden.html"
    ><button type="button" class="btn btn-primary" id="world" >World Map</button></a>
    </div>
    <div class="col-md-4">
        <a href="map_game/europe.html"><button type="button" class="btn btn-primary" id="europe">Europe</button></a>
    </div>
    <div class="col-md-4">
        <a href="map_game/world.html"><button type="button" class="btn btn-primary" id="sweden">Sweden</button></a>
    </div>
</div>