Javascript HTML5画布上未触发TouchEnd事件

我正在HTML5画布上开发一个草图应用程序。我已经在画布上添加了“触摸听众”

但只有touchstart和touchmove事件被触发。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> 

var帆布；
var语境；
//创建跟踪触摸运动的抽屉
变量抽屉={
isDrawing:错误，
touchstart：功能（coors）{
context.beginPath（）；
moveTo（coors.x，coors.y）；
this.isDrawing=true；
},
触摸移动：功能（coors）{
如果（此.isDrawing）{
lineTo（coors.x，coors.y）；
当前_笔划+=coors.x+'，'+coors.y+'；'；
stroke（）；
}
},
touchend：功能（coors）{
如果（此.isDrawing）{
lineTo（coors.x，coors.y）；
当前_笔划+=coors.x+'，'+coors.y+'；'；
stroke（）；
this.isDrawing=false；
}
}
};  // 抽屉末端
//创建一个将触摸事件和坐标传递给抽屉的函数
功能图（事件）{
//获取触摸坐标
var coors={
x:event.targetTouches[0]。第x页，
y:event.targetTouches[0]。第页
};
//将坐标传递给相应的处理程序
抽屉[事件类型]（coors）；
}
$（文档）.ready（函数（）{
//获取canvas元素及其上下文
canvas=document.getElementById（'sketchpad'）；
context=canvas.getContext（'2d'）；
context.lineWidth=5；
context.strokeStyle='blue'；
//连接touchstart、touchmove、touchend事件侦听器。
canvas.addEventListener（'touchstart'，draw，false）；
canvas.addEventListener（'touchmove'，draw，false）；
canvas.addEventListener（'touchend'，draw，false）；
//防止弹性滚动
document.body.addEventListener（'touchmove'，函数（事件）{
event.preventDefault（）；
}，false）；//结束body.onTouchMove
});

这可能有点晚了，但接下来

Touchend事件不注册x和y屏幕位置，因为实际上，当它被触发时，您的手指不在屏幕上，并且它无法回忆最后已知的屏幕位置

尝试使用这样的方法

在touchmove函数中-如果捕获当前的x和y坐标，如：this.lastCoors={coors.x，coors.y}，则可以在touchend函数中使用它们来替换当前的coors值

---

或者，明智的做法是重新设计代码，使Touchend函数不再需要同时使用coors.x和y值。

这可能有点晚了，但接下来

Touchend事件不注册x和y屏幕位置，因为实际上，当它被触发时，您的手指不在屏幕上，并且它无法回忆最后已知的屏幕位置

尝试使用这样的方法

在touchmove函数中-如果捕获当前的x和y坐标，如：this.lastCoors={coors.x，coors.y}，则可以在touchend函数中使用它们来替换当前的coors值

---

或者，明智的做法是重新设计代码，使Touchend函数不再需要同时使用coors.x和y值。

我所做的解决方案

我创建了一个函数并调用它而不是draw，它工作了

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

---

我做了什么作为解决方案

我创建了一个函数并调用它而不是draw，它工作了

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

---

这很有道理。谢谢这很有道理。谢谢