Question

我找不到关于按下按钮的速度的任何信息，所以我希望这没关系。这适用于网络应用程序。

对于那些拥有iPhone（或现在大多数现代智能手机）的人来说，如果您在解锁手机时拥有引脚样式的解锁屏幕，智能手机会像您一样快速地识别您所做的每一次触摸。

网站也是如此，如果您快速点击按钮，它会在您执行此操作后立即记录您执行的每次点击。

然而，我遇到了穿越两者的问题。

我有一个'pin'样式的登录信息，其中引脚仅为1234用于测试目的。我想要它，以便有人可以将它用作网络应用程序，并且他们有独特的引脚可以快速登录。但是，如果我尝试快速输入1234，则只会注册1和4或有时1和3，具体取决于我执行速度有多慢。如果我花时间去做，那么我可以得到所有4，但快速做到这就是我的问题所在。

总体问题：

网络应用程序是否有办法在智能手机上注册快速指压（但主要是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。

Answer 1

用户执行的点击需要300毫秒才能发送一个事件。这只是为了检测可能的双击。

您可以通过聆听touchstart-touchend来防止这种情况，并立即触发它们。

但是，金融时报在他们的网络应用程序中已经很好地完成了自己的初始检测。有关详细信息，请参阅：https://github.com/ftlabs/fastclick。

按下iOS网络应用程序的快速按钮

1 个答案: