HTML5 iPhone protectDefault () не останавливается от «копирования», появляющегося при прикосновении - PullRequest
2 голосов
/ 30 августа 2010

У меня есть этот код, который показывает координаты касания, когда пользователь проводит пальцем по экрану. Проблема в том, что, если я слишком долго касаюсь экрана, он выбирает весь холст и отображает пузырь «копировать», который является поведением по умолчанию. Как мне от этого избавиться?

<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 Ответ

2 голосов
/ 30 августа 2010

Только что добавил слушателя для touchstart, и это сработало:)

// listener for the touch
document.addEventListener('touchstart', function(event) {
    event.preventDefault();
}, false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...