Question

当我尝试从它外面的画布上滑动时，附加到其中的事件监听器不接收＆＃39; touchmove＆＃39;事件。换句话说，我需要在父节点上注册touchmove bagan。

有没有办法将此事件从父元素传播到画布？包括opensource 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);     
    }
});

这是小提琴：

Fiddle

HTML5＆＃39; touchmove＆＃39;如果在它之外启动，事件不会在画布上触发

1 个答案: