I have this code, which shows the coordinates of the touch as the user drags his finger across the screen. The issue is that is I touch the screen for too long, it selects the entire canvas and displays the "copy" bubble, which is the default behaviour. How do I get rid of that?
<html>
<head>
<script type="application/javascript">
function drawCross(color,x,y){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineWidth=4;
ctx.moveTo(x,0);
ctx.lineTo(x,480);
ctx.moveTo(0,y);
ctx.lineTo(320,y);
ctx.stroke();
}
document.addEventListener('touchmove', function(event) {
event.preventDefault();
var touch = event.touches[0];
drawCross('#ffffff',document.getElementById('oldX').value,document.getElementById('oldY').value);
drawCross('#cc0000',touch.pageX,touch.pageY);
document.getElementById('oldX').value=touch.pageX;
document.getElementById('oldY').value=touch.pageY;
}, false);
document.addEventListener('touchend', function(event) {
event.preventDefault();
drawCross('#ffffff',document.getElementById('oldX').value,document.getElementById('oldY').value);
document.getElementById('oldX').value=0;
document.getElementById('oldY').value=0;
}, false);
</script>
</head>
<body>
<input id="oldX" type="hidden" value="0">
<input id="oldY" type="hidden" value="0">
<div><canvas id="canvas" width="320" height="480"></canvas></div>
</body>
</html>