2010-08-30 84 views
2

我有这段代码,它显示了用户在屏幕上拖动他的手指时触摸的坐标。问题是,如果我长时间触摸屏幕,它会选择整个画布并显示“复制”气泡,这是默认行为。我该如何摆脱?HTML5 iPhone preventDefault()不会停止从“复制”出现在触摸上

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

回答

2

只是增加了touchstart监听器,它的工作:)

// listener for the touch 
document.addEventListener('touchstart', function(event) { 
    event.preventDefault(); 
}, false); 
相关问题