使用纯（普通）JS 在画布的 X、Y 坐标处触发点击事件

Question

<canvas id="MyCanvas" width="800" height="600"></canvas>

我想模拟某个位置的点击（例如 x=200，y=150）。

var MyCanvas = document.getElementById('MyCanvas');
MyCanvas.click(200, 150);

上面的代码不起作用。与下面稍加修改的相同：

var MyCanvas = document.getElementById('MyCanvas');
MyCanvas.click({pageX: 200, pageY: 150});

...并使用从使用 javascript 模拟单击​​ x/y 坐标复制的以下代码。

function simulateClick(x, y) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent(
        'click', true, true, window, 0,
        0, 0, x, y, false, false,
        false, false, 0, null
    );
    document.elementFromPoint(x, y).dispatchEvent(clickEvent);
}
simulateClick(200, 150);

下面是基于上面代码的代码，但这也不起作用。

function simulateClick(x, y){
    document.elementFromPoint(x, y).click();
}
simulateClick(200, 150);

最后一个代码也不会触发点击。

function simulateClick(targetCanvas, x, y) {
    var clickEvent = new MouseEvent(
        "click",
        {
            clientX: x,
            clientY: y,
            bubbles: true
        }
    );
    targetCanvas.dispatchEvent(clickEvent);
}
var MyCanvas = document.getElementById('MyCanvas');
simulateClick(MyCanvas, 200, 150);

Answer 1

感谢@ Emiel.Zuurbier请求监听点击事件的代码，我发现我的画布监听的是，mousedown而不是click事件。所以改变 监听的事件类型就足够了MyCanvas。我的问题中发布的最后一个代码工作正常。第二种方法是继续监听mousedown事件并将触发设置为此类事件而不是click事件。

下面是该代码的缩短版本，非常适合当我们不想将代码与其他 X、Y 值重用时的情况（例如，在书签中）。

document
    .getElementById('MyCanvas')
        .dispatchEvent(
            new MouseEvent(
                "click", // or "mousedown" if the canvas listens for such an event
                {
                    clientX: 200,
                    clientY: 150,
                    bubbles: true
                }
            )
        );