Быстрое нажатие кнопки для веб-приложения iOS

0

Я не мог найти ничего о том, как быстро нажата кнопка, поэтому я надеюсь, что все в порядке. Это для веб-приложения.

Для тех из вас, у кого есть iPhone (или самые современные смартфоны сейчас), если у вас есть экран разблокировки, когда вы разблокируете свой телефон, смартфон распознает каждое касание, которое вы делаете, так же быстро, как и вы.

То же самое происходит с веб-сайтом, если вы быстро нажимаете на кнопки, он регистрирует каждый щелчок, который вы делаете, как только вы это делаете.

Тем не менее, у меня проблема, связанная с двумя.

У меня есть логин в стиле "булавка", в котором для тестовых целей на штырьке всего 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.

  • 0
    Я думаю, что вы должны попытаться сделать это без jQuery, это будет немного быстрее и может решить вашу проблему.
  • 0
    Это не настоящая веб-страница. Это как быстро iPhone понимает, что он нажал кнопку. @ Андре
Теги:
iphone-standalone-web-app

1 ответ

2
Лучший ответ

Клиенту, выполняемому пользователем, требуется 300 мс для отправки события. Это просто для обнаружения возможных двойных щелчков.

Вы можете предотвратить это, слушая touchstart-touchhend и запуская их как щелчок без задержек.

Но вместо того, чтобы создавать свои собственные начальные обнаружения, это уже хорошо сделано Financial Times в их веб-приложении. Подробнее см. Https://github.com/ftlabs/fastclick.

Поделиться
  • 0
    Именно то, что я искал! Большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню