我找不到任何关于按下按钮的速度的信息，所以我希望这没问题。这是一个网络应用程序。
对于那些拥有 iPhone(或现在大多数现代智能手机)的人来说，如果您在解锁手机时看到针式解锁屏幕，智能手机会识别您的每一次触摸，速度与您的操作一样快。
网站也是如此，如果您快速点击按钮，它会在您点击时立即记录您的每一次点击。
但是，我在跨越两者时遇到了问题。
我有一个“pin”样式的登录，其中 pin 只是 1234 用于测试目的。我想要它，以便有人可以将它用作网络应用程序，并且他们有自己独特的 PIN 码可以快速登录。但是，如果我尝试快速输入 1234，它只会注册 1 和 4 或有时 1 和 3 取决于我做的有多慢。如果我花时间去做，那么我可以获得所有 4 个，但快速完成是我的问题所在。
总体问题:
Web 应用程序是否有任何方法可以在智能手机(但主要是 iOS)上注册快速手指按压？
代码 HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Pin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src='http://code.jquery.com/jquery.min.js'></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class='row text-center'>
<div class='col-xs-12'>
<div class='small-circle a1'></div>
<div class='small-circle a2'></div>
<div class='small-circle a3'></div>
<div class='small-circle a4'></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="1"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="2"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="3"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="4"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="5"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="6"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="7"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="8"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="9"></div>
</div>
<div class='clearfix'></div>
<div class='col-xs-12'>
<div class='bottom_main num hover' data-number="0"></div>
</div>
</div>
</div>
</div>
<script src='script.js'></script>
</body>
</html>
CSS
body{
counter-reset: amount;
}
.num{
width:75px;
height:75px;
border:1px solid #000;
border-radius:100%;
line-height:75px;
margin:auto;
margin-top:30px;
counter-increment:amount;
}
.main:before{
content:counter(amount);
}
.bottom_main:before{
content:'0';
}
.active{
background:blue !important;
}
.small-circle{
display:inline-block;
width:20px;
height:20px;
border:1px solid #000;
border-radius:100%;
margin-top:20px;
}
jQuery
$(document).ready(function() {
var array = [];
var pin = "1234";
var a = 0;
$('.num').click(function(){
a++;
if (array.length <= 3)
{
array.push($(this).attr('data-number'));
}
});
setInterval(function() {
$('.a'+a).addClass('active');
if (array.length >= 4)
{
if (array.join("") === pin)
{
$('.small-circle').css('background','green');
$('.small-circle').removeClass('active');
}
else
{
array = [];
a = 0;
$('.small-circle').css('background','red');
$('.small-circle').removeClass('active');
}
}
}, 100);
});
还有一个 jsFiddle用于快速检查，但我不确定它是否适用于 iPhone。
最佳答案
用户执行一次点击需要 300 毫秒来分派(dispatch)一个事件。这只是为了检测可能的双击。
您可以通过监听 touchstart-touchend 并将它们作为点击立即触发来防止这种情况。
但 Financial Times 在他们的网络应用程序中已经很好地完成了这一点，而不是构建您自己的开始和结束检测。请参阅:https://github.com/ftlabs/fastclick了解详情。
关于javascript - iOS 网络应用程序的快速按钮按下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20333131/