我正在开发一个phonegap应用程序，目前正在iPhone上进行测试。我想做的很简单。我想按下一个按钮，并且只有我正在按下的那个按钮必须被按下。我想防止用户同时按下多个按钮。要根据苹果指南执行此操作，您应该在按下目标按钮时禁用所有其他按钮。对我来说，问题是，如果您最终在同一时间连续点击两个按钮，那么这两个按钮都会被按下。据我所知，JavaScript 中没有锁，而且我也尝试过使用变量作为锁，但它仍然有效。我有这段代码，可以在 iPhone 上进行测试以重现问题。我的问题是如何以正确的方式对按钮按下进行编程？
<script type="text/javascript" src="plugins/jquery.js"></script>
<script>
$(document).ready(function(){
CreateEvents();
}); //end ready function
function CreateEvents()
{
$('.divs').on('touchstart', function(){
$('.divs').not(this).off();
$(this).css('background-color','red');
});
$('.divs').on('touchend', function(){
$(this).css('background-color','green');
setTimeout(function(){
CreateEvents();
}, 300);
});
}
</script>
<style>
.divs{
width:200px;
height:200px;
background-color:green;
}
</style>
</head>
<body>
<div class="divs">
div1
</div>
<div class="divs">
div2
</div>
</body>
</html>
最佳答案
我认为这可能是按下按钮以确保一次只按下一个按钮的正确方法。
$(".divs").on('touchstart', function(event){
event.stopPropagation();
event.preventDefault();
if(event.handled !== true) {
$('.divs').not(this).off();
$(this).css('background-color','red');
event.handled = true;
} else {
return false;
}
});
$(".divs").on('touchend', function(event){
event.stopPropagation();
event.preventDefault();
if(event.handled !== true) {
$(this).css('background-color','green');
CreateEvents();
event.handled = true;
} else {
return false;
}
});
但是请务必注意，如果您同时使用触摸事件和鼠标单击事件，某些设备将进行双击，因为它们将触摸同时注册为单击事件和触摸事件。这种方法显然也应该防止这种情况发生，但事实并非如此。这称为“ghostclick”，应该有插件来解决此问题，但最简单的方法就是使用触摸事件或鼠标单击事件。
如果能看到人们如何在您自己的应用程序中解决这些问题的其他示例，那就太好了？
关于jquery - PhoneGap 单按钮按下正确方式，无多点触控干扰，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15729879/