События TouchEnd, которые не запускаются на HTML5 Canvas

Question

Я работаю над созданием эскизного приложения на холсте HTML5. Я добавил «Touch Listeners» на холст.

Но срабатывают только события касания и касания. Touchend не уволен. Может ли кто-нибудь объяснить, почему и что такое исправление?

<script type="text/javascript" charset="utf-8"> 

    var canvas ; 
    var context ; 


    // create a drawer which tracks touch movements 
    var drawer = { 
     isDrawing: false, 
      touchstart: function(coors){ 
      context.beginPath(); 
      context.moveTo(coors.x, coors.y); 
      this.isDrawing = true; 
     }, 
     touchmove: function(coors){ 
      if (this.isDrawing) { 
       context.lineTo(coors.x, coors.y); 
       current_stroke+= coors.x+','+coors.y+';'; 
       context.stroke(); 

      } 
     }, 
     touchend: function(coors){ 


      if (this.isDrawing) { 
       context.lineTo(coors.x, coors.y); 
       current_stroke+= coors.x+','+coors.y+';'; 
       context.stroke(); 
       this.isDrawing = false; 


      } 
     } 
    }; // end of drawer 





    // create a function to pass touch events and coordinates to drawer 
    function draw(event){ 
     // get the touch coordinates 
     var coors = { 
      x: event.targetTouches[0].pageX, 
      y: event.targetTouches[0].pageY 
     }; 
     // pass the coordinates to the appropriate handler 
     drawer[event.type](coors); 
    } 


$(document).ready(function() { 
    // get the canvas element and its context 
    canvas = document.getElementById('sketchpad'); 
    context = canvas.getContext('2d'); 
    context.lineWidth = 5; 
    context.strokeStyle = 'blue'; 







    // attach the touchstart, touchmove, touchend event listeners. 
    canvas.addEventListener('touchstart',draw, false); 
    canvas.addEventListener('touchmove',draw, false); 
    canvas.addEventListener('touchend',draw, false); 

    // prevent elastic scrolling 
    document.body.addEventListener('touchmove',function(event){ 
     event.preventDefault(); 
    },false); // end body.onTouchMove 

}); 


</script> 

Answer 1

Это может быть немного поздно, но здесь идет ...

Событие Touchend не зарегистрировать й и у экрана позиции, потому что в действительности вы не имеете палец на экране, когда его увольнение, и у него нет возможности вспомнить последнюю известную позицию экрана.

Попробуйте использовать такой метод, как это ...

В вашей функции TouchMove - если вы захватить текущие х и у COORDS примерно так: this.lastCoors = {coors.x, coors.y} вы будете быть в состоянии использовать их в вашей функции touchhend взамен текущих значений coors

В качестве альтернативы может быть разумным перекомпоновать ваш код, чтобы ваша функция Touchend больше не нуждалась в использовании значений coors.x и y. вместе.

Answer 2

то, что я сделал в качестве решения

Я создал функцию и называем его вместо ничьей, он работал

function ended(){ 
    /* your code here */ 
    } 
    canvas.addEventListener('touchend',ended, false);