如果HTML5“ touchmove”事件在外部启动，则不会在画布上触发

Question

当我尝试从其外部的画布上滑动时，连接到一个画布的事件侦听器不会收到“ touchmove”事件。 换句话说，我需要在父节点上注册该bagan的touchmove。

有没有办法将此事件从父元素传播到画布？ 包括开源jquery插件在内的任何解决方案都是可以接受的。

提前致谢！

Answer 1

这种方法的主要问题是，在父元素上捕获的事件将传播到子元素。 一种可能的解决方案是在父节点上侦听touch或mouse事件，然后检查手指是否在触摸外部元素。 如果是这样，则在画布本身上调度mousemove或touchmove事件，然后在画布上捕获此事件。

我们将测试鼠标指针在画布区域上，并且仅在这种情况下才调度touch事件。 这样，只有当手指到达画布区域时，事件才会被画布捕获。

我创建了一个用于说明的代码段。 我提供了mousemove事件的示例，但是您也可以扩展到touchmove事件。 我没有包含canvas事件侦听器的主要部分，只提供了一条简单的消息。

HTML：

<div class="canvas-holder">
    <canvas id="canvas" width=300 height=300></canvas>
</div>

JS：

var canvasHolder = document.getElementsByClassName('canvas-holder')[0];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;

ctx.fillStyle = "rgba(255,0,0,1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

var canvasPosLeft = canvas.getBoundingClientRect().left;
var canvasPosTop = canvas.getBoundingClientRect().top;
var canvasPosRight = canvas.getBoundingClientRect().right;
var canvasPosBottom = canvas.getBoundingClientRect().bottom;

var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousemove', true, true, window, 1, 100, 100, 100, 100);

// Listen for the event.
canvas.addEventListener('mousemove', function (e) { 
    // main logic here...
    console.log('mouse triggered');
}, false);

canvasHolder.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var posX = e.clientX;
    var posY = e.clientY;

    if ((posX < canvasPosLeft || posX > canvasPosRight ) ||
        (posY < canvasPosTop || posY > canvasPosBottom ))  {

        // Dispatch the event.
        canvas.dispatchEvent(event);     
    }
});

这是小提琴 ：

小提琴