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 上研究过这个问题，但无法通过 this and this 问题解决我的问题。

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 的按钮，像这样：

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

Javascript onclick() 需要点击两次

Javascript onclick() requires two clicks

html

javascript

jquery

onclick

button