Событие Touchstart никогда не запускается на Android Chrome при первом загрузке страницы

В Android Chrome, когда вы создаете новую вкладку и получаете доступ к странице с содержимым ниже, ваши прикосновения к div #touch никогда не запускали события touch-start. После перезагрузки страницы вы можете запустить событие.

Почему? и как я могу избежать этой ситуации?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>touch start on Android</title>
  <style type="text/css">
  #touch, #click {
    position: relative;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    border: solid 1px black;
  }
  </style>
</head>
<body>
  <div id="touch">Touch</div>
  <div id="click">Click</div>
  <script type="text/javascript">
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  </script>
</body>
</html>

Моя среда,

Nexus 7 (2013)
Номер сборки для Android 4.30 JSS15Q
Chrome 29.0.1547.72 (версия WebKit 537.36 (@156722), версия JavaScript V8 3.19.18.21)

Ответ 1

Возможно, попытайтесь отложить добавление прослушивателей событий до тех пор, пока DOM не будет готов?

<script>
  function touchTest() {
    document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
    document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  }

  document.addEventListener('DOMContentLoaded', touchTest);
</script>

Тот факт, что ваш код работает при перезагрузке, может указывать на то, что прослушиватели событий добавляются слишком быстро при загрузке первой страницы?

Ответ 2

Ваши html-разметки и js, похоже, работают хорошо. Вы должны проверить, нуждается ли элемент в обработке "touchstart" в ваших реальных разметках, с атрибутом "title". Это может быть причиной, из-за которой она не срабатывает при первом касании.

Ответ 3

Я предполагаю, что это связано с вашей версией Chrome. Ваш код работает нормально, при первой загрузке тоже, на Chrome Dev 58.0.3007.3 (Android 7.1.1 build NMF26F)

Попробуйте эту модификацию кода, она добавляет слушателей после загрузки тела:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>touch start on Android</title>
        <style type="text/css">
            #touch, #click  {
                position: relative;
                left: 100px;
                top: 100px;
                width: 200px;
                height: 200px;
                border: solid 1px black;
            }
        </style>
        <script type="text/javascript">
            function startListening()  {
                document.getElementById("touch").addEventListener("touchstart", function()  {alert("touch");}, false);
                document.getElementById("click").addEventListener("click", function()  {alert("click");}, false);
            }
        </script>
    </head>
    <body onload="startListening()">
        <div id="touch">Touch</div>
        <div id="click">Click</div>
    </body>
</html>

Ответ 4

Да, тоже я исправил добавление события касания к документу Добавьте следующий код в свой JS файл это должно работать.

document.addEventListener("touchmove",function(){})

Ответ 5

$(document).ready(function(){
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
});

Попробуйте это. Когда страница загружается, javascript будет запускать ваш код. это JQuery решение вашей проблемы (если оно работает). если вы не хотите использовать jquery, вы можете найти эквивалентную форму javascript

$(документ).ready

Ответ 6

В некоторых старых версиях WebKit есть некоторые странные ошибки с событиями касания. Взгляните на эти отчеты об ошибках: 5491, 19827, 4549, 150779.

Трюк заключается в добавлении e.preventDefault() в обработчик события touchstart. Это необходимо из-за того, что браузер выполняет собственную прокрутку.

android-swipe-shim проект предоставляет другое решение и дополнительную информацию:

На некоторых устройствах Android, когда пользователь прикасается к экрану, запускается событие touchstart, Android передает событие в WebView (javascript) для обработки. Если WebView не предотвращаетdefault (в течение 200 мс), Android возобновляет естественную прокрутку и останавливает передачу событий касания к WebView.

Решением этого является главным образом предотвращениеDefault на touchstart и ручная прокрутка с помощью javascript.

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

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