JavaScript的onclick()需要两次点击。

Question

我有三个按钮，每个按钮都在onclick中调用chooseMap()函数，然后根据按钮的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和this问题解决我的问题。

- codeWolf

---

为什么你把 document.ready 放在 chooseMap 函数内部？ - Amit Soni

很可能是因为chooseMap函数在文档加载时没有被调用，而是在你第一次点击按钮时才被调用。然后，点击事件会与按钮注册，并在第二次点击时触发。这种情况可能吗？ - Fuzzzzel

很难将一些按钮包装在超链接中，你需要使用jQuery。 - madalinivascu

超级经典的问题。你把你的点击事件附加在另一个函数内部，所以这些点击事件只有在调用该函数后才变得有效。 - Jeremy Thille

我意识到我的问题非常新手，因为每个人都能在两秒钟内解决它 :)新手感谢大家，我甚至不能投赞成票，因为我还没有足够的声望。 - codeWolf

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原则进一步改进此操作，您可以基于按钮元素的class使用单个处理程序，并使用id设置URL，就像这样：

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

- Rory McCrossan

---

DRY 的例子非常好，但是使用 addEventListener 也可以实现相同的功能，这背后有什么原因吗？ - Vitaliy Terziev

不是的，你也可以使用 addEventListener。我提供了一个 jQuery 的例子，因为 OP 似乎处于半路状态。如果页面中已经包含了 jQuery，那么你也可以使用它 :) - Rory McCrossan

我已经尝试过这个，但有时我的按钮需要点击两次才能生效。我可以通过在文本区域中按Enter键，然后单击按钮来稳定地重现此问题。 - Chewie The Chorkie

@ChewieTheChorkie，听起来你可能有嵌套的事件处理程序。如果这是一个问题，我建议你开一个新的问题来讨论。 - Rory McCrossan

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

- Tushar

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> 

- madalinivascu