代码之家 › 专栏 › 技术社区 › Amarsh

HTML5 iPhone PreventDefault()不会停止“复制”以在触摸时显示

behavior touch default html5 iphone

2

Amarsh · 技术社区 · 14 年前

我有这个代码,它显示了用户在屏幕上拖动手指时触摸的坐标。问题是,如果我触摸屏幕太久,它会选择整个画布并显示“复制”气泡,这是默认行为。我该怎么处理?

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

1 回复 | 直到 12 年前

1

2

Amarsh 14 年前

刚刚为TouchStart添加了一个侦听器,它起作用了:)

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