JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<h1>Touch events bug in Chrome for Android</h1>
<ul class="alerts">
</ul>
<p>Expected results: the browser continues to register "touchmove" events as you swipe your finger around the page, and register "touchend" when you lift your finger.</p>
<p>Results in Chrome for Android: Only one "touchmove" event fires after you start dragging your finger, and no "touchend" event fires when finger lifted (with the exception of when doing just a tap).</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
CSS
body {
font-family: Verdana, Helvetica, sans-serif;
}
.alerts {
font-size: 20px;
line-height: 30px;
height: 400px;
background: black;
color: #5bd122;
overflow: hidden;
list-style-type: none;
margin: 10px 0;
padding: 0 10px;
border-top: solid 10px black;
border-bottom: solid 10px black;
}
.alerts li:nth-child(even) {
background: #154100;
}
JavaScript
$(document).ready(function () {
// Bind touch event listeners.
var elem = $('html').get(0);
elem.addEventListener('touchstart', function (e) {
postMessage('"touchstart" detected. Coordinates - ' + getCoord(e));
});
elem.addEventListener('touchmove', function (e) {
postMessage('"touchmove" detected. Coordinates - ' + getCoord(e));
});
elem.addEventListener('touchend', function (e) {
postMessage('"touchend" detected. Coordinates - ' + getCoord(e));
});
postMessage('Event listeners loaded.');
});
function postMessage(text) {
$('.alerts').prepend('<li>' + text + '</li>');
};
function getCoord(e) {
var touch = false;
if (e.touches.length > 0) {
touch = e.touches[0];
} else {
touch = e.changedTouches[0];
}
if (touch) {
return 'x: ' + touch.pageX + ', y: ' + touch.pageY;
}
}