Кнопка JavaScript больше не работает на мобильном телефоне - PullRequest
Новая
       20

Кнопка JavaScript больше не работает на мобильном телефоне

0 голосов
/ 03 октября 2018

Итак, я устраняю проблему в нашем приложении и не могу ее решить.Я не написал базовый код и могу только вставлять CSS и Javascript.Существует очень простой элемент span с идентификатором, ниже приведен фрагмент Javascript, в котором говорится: «Если щелкнуть элемент с идентификатором submitButton, отправьте форму #createForm».Тем не менее, на мобильном телефоне он не работает, и браузер не выдает никаких ошибок. 

<form method="post" action="page.html" id="createForm">
    <span id="submitButton">Submit form</span>
</form>
<script> 
    $("#submitButton").on("click", function (event) {
        if (attributeEqualsDisabled($(this).attr('disabled'))) {
            return true;
        }
        $("#submitButton").attr('disabled', true);
        $('#createForm').submit();
    });
</script>

Теперь это отлично работает в браузерах настольных компьютеров, даже при использовании режима «показывать как iphone» в Chrome.Вы можете нажать кнопку, все работает.

Однако в мобильном сафари и при добавлении страницы в качестве веб-приложения кнопка больше не работает.Когда вы нажимаете на нее, страница просто прокручивается вверх и ничего не делает.Я проверил это на своем Mac, и все кажется нормальным и точно таким же, как на рабочем столе.Я даже могу запустить $("#submitButton").click(); на своем iphone через консоль, и он отлично работает.

В консоли нет ошибок или предупреждений.У кого-нибудь есть предложения по устранению неполадок?К сожалению, я не могу дать прямой доступ к коду, потому что все находится на заблокированном IP-сервере.

Есть ли какой-нибудь способ точно увидеть, что происходит, когда я нажимаю кнопку?Я пробовал вкладку «Временные шкалы», но при нажатии кнопки ничего не отображается.

1 Ответ

0 голосов
/ 03 октября 2018

Этот ответ другого пользователя исправил его: https://stackoverflow.com/a/3026621/3461722

Спасибо Робину Зигмонду за то, что он указал мне правильное направление.Я думал, что что-то препятствует срабатыванию события click, но оно просто не срабатывает, потому что мне нужно было отследить событие touchstart.

В связанном ответе упоминается, что было найдено лучшее решениедобавив cursor:pointer; к кнопке с помощью CSS, однако мой элемент уже имел это, поэтому в данном случае он явно не работал.

Добавьте эту функцию для обнаружения нажатий на мобильном телефоне: 

$('#submitButton').bind( "touchstart", function(e){
    if (attributeEqualsDisabled($(this).attr('disabled'))) {
        return true;
    }
    $("#submitButton").attr('disabled', true);
    $('#createForm').submit();
});
...