Touchstart event never be triggered on Android Chrome at the first time of page loading
On Android Chrome, when you create a new tab and access to a page with the content below, your touches to #touch div have never triggered touch-start events. Once you reload the page, you can trigger the event.
Why? and How can I avoid this situation?
<!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>
My environment is,
- Nexus 7 (2013)
- Android 4.30 build number JSS15Q
- Chrome 29.0.1547.72 (WebKit version 537.36(@156722), JavaScript version V8 3.19.18.21)
Maybe try to delay adding the event listeners until the DOM is ready?
<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>
The fact that your code works on a reload might indicate that the event listeners are being added too quickly on the first page load?
Your html markups and js seems to work well. You should check if the element needs handling “touchstart” in your real markups has “title” attribute. This could be a reason that makes it not to fire at first touch.
I’m guessing it’s something to do with your version of Chrome.
Your code’s working fine, on first load too, on Chrome Dev 58.0.3007.3 (Android 7.1.1 build NMF26F)
Try this modification of the code, it adds the listeners after the body has been loaded:
<!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>
Yes, mee too I have fixed through adding touch move event to document
Add following code to your JS file
this should work.
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);
});
Try this. When page is loaded javascript will run your code.
this is Jquery solution of your issue(if it works).
if you don’t want to use jquery, you can find javascript equivalent form of
$(document).ready
There some odd bugs with touch events in older WebKit versions. Take a look at this bug reports: 5491, 19827, 4549, 150779.
The trick is to add e.preventDefault() in touchstart event handler. This is required because of the way native scrolling is handled by the browser.
android-swipe-shim project provides another solution and some more info:
On some Android devices when the user touches the screen a touchstart event is fired, Android passes the event to WebView (javascript) to be handled. If WebView does not preventdefault (within 200ms), Android resumes native scrolling and stops passing touch events to WebView.
The solution to this has mostly been to preventDefault on touchstart and manually scroll using javascript.
This behavior is embedded in millions of Android devices and cannot be corrected at its source.
This shim provides a solution by overlaying a contained element that can be natively scrolled and fires swipe events based on its scroll offsets, allowing your software to handle move events with native scrolling enabled.
