[英]Javascript onclick() requires two clicks
我有三个按钮,每个按钮调用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";
}
})
}
一切正常。 我点击按钮,调用函数,传递正确的字符串,我很高兴地发送到下一页,一切都有效。 但是,我必须在按钮上单击两次才能使其正常工作。 我第一次点击没有任何反应。 有什么想法吗?
问题是因为第一次单击执行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');
})
});
使用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";
});
});
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.