I haven’t found how to change anything inside defold generated html code, if you mean that…
But I made simple page with no defold to test (see below)
This will reproduce same issue on iphone, and it has no preventDefault in the handler.
If you uncomment preventDefault line in the handler function - issue will be gone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>test touch</title>
<style>
/* Disable user selection to avoid strange bug in Chrome on Windows:
* Selecting a text outside the canvas, then clicking+draging would
* drag the selected text but block mouse down/up events to the engine.
*/
body {
background-color: rgb(255, 200, 200);
position: fixed;
}
.canvas-app-container {
background: rgb(200,255,200);
}
</style>
</head>
<body>
test toches with issue 1
<div id="div_debug">nothing</div>
<div id="app-container" class="canvas-app-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="640" height="1136"></canvas>
</div>
<script type='text/javascript'>
var touchzone = document.getElementById("app-container");
touchzone.addEventListener("mousedown", touchHandler, true);
touchzone.addEventListener("mousemove", touchHandler, true);
touchzone.addEventListener("touchstart", touchHandler, true);
touchzone.addEventListener("touchmove", touchHandler, true);
console.log("!!!TEST CONSOLE LOG!!!");
function touchHandler(event) {
if (!event.touches) {
var xx = event.screenX;
var yy = event.screenY;
} else {
var xx = (event.touches[0].screenX);
var yy = (event.touches[0].screenY);
}
document.getElementById('div_debug').innerHTML = xx + ", " + yy;
// event.preventDefault();
}
</script>
</body>
</html>
