javascript - 如果在 Canvas 外部启动，HTML5 'touchmove' 事件不会在 Canvas 上触发

Question

当我尝试从 Canvas 外部开始滑动时，附加到 Canvas 的事件监听器不会收到“touchmove”事件。换句话说，我需要在父节点上注册 touchmove that bagan。

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

提前致谢!

Answer 1

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

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

我创建了一个片段用于说明。我提供了 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);     
    }
});

这是 fiddle :

Fiddle