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

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

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

<!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> 

Моя среда,

  1. Nexus 7 (2013)
  2. Android 4.30 номер сборки JSS15Q
  3. Chrome 29.0.1547.72 (версия WebKit 537.36 (@ 156722), версия JavaScript V8 3.19.18.21)

Может быть, попытайтесь отложить добавление слушателей событий до тех пор, пока 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> 

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

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

Я предполагаю, что это как-то связано с вашей версией 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> 

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

 document.addEventListener("touchmove",function(){}) 
 $(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

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

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

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

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

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

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

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