javascript - TouchEnd事件未在HTML5 Canvas上触发

我正在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>

最佳答案

可能有点晚了，但是。。。
Touchend事件不会注册x和y屏幕位置，因为实际上，当它触发时，您的手指没有在屏幕上，并且它没有能力调用最后一个已知的屏幕位置。
试着用这样的方法。。。
在touchmove函数中-如果捕获当前的x和y坐标如下：this.lastCoors={coors.x，coors.y}则可以在touchend函数中使用它们来替换当前的coors值
或者，重新设计代码是明智的，这样您的Touchend函数就不再需要同时使用coors.x和y值。

关于javascript - TouchEnd事件未在HTML5 Canvas上触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10579726/