Javascript onclick（）需要兩次點擊

我已經研究了Stack Overflow上的這個問題，但是無法通過this和this問題解決我的問題。Javascript onclick（）需要兩次點擊

這裏是我的問題：

我有三個按鍵，分別調用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"; 
     } 
    }) 
}

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

來源

2015-04-24 codeWolf

你能把你的代碼放在小提琴中嗎？ –

爲什麼在'chooseMap'函數中放置'document.ready' –

當文檔被加載但是第一次點擊按鈕時，很可能不會調用chooseMap。然後，單擊事件向按鈕註冊並在第二次點擊時觸發。那可能嗎？ – Fuzzzzel

問題是因爲第一次點擊執行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'); 
    }); 
});

請注意，您甚至可以通過使用乾燥的原則進一步完善這一點，你可以使用基於button元素的class單處理器，並使用該按鈕的id設置的URL ，這樣的事情：

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

來源

2015-04-24 10:49:34

解決了！謝謝老兄，我現在學到了一些新東西 – codeWolf

DRY的例子很好，但是jQuery，用addEventListener可以實現同樣的效果，這背後有什麼理由嗎？ –

不可以使用'addEventListener'我提供了一個jQuery示例，因爲OP似乎處於一種半途而廢的狀態，如果你在頁面中包含了jQuery，你可以使用它:) –

使用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"; 
    }); 
});

來源

2015-04-24 10:49:44 Tushar

<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>

來源

2015-04-24 10:59:22 madalinivascu

Javascript onclick（）需要兩次點擊

回答

相關問題