在 HTML5 canvas 元素上模拟鼠标单击 (x, y)

Question

我一直在尝试以编程方式在 canvas 元素上的任意坐标处模拟鼠标点击。 由于技术限制，我需要避免使用 jQuery ，这会使这更容易。

使用这个答案，我可以获得手动点击的坐标。

使用这个答案，我能够以编程方式模拟鼠标点击。 但不幸的是，我需要对它进行反 jQuery 化，我认为这是我遇到问题的地方。

如果我尝试做类似的事情：

document.querySelector("canvas").dispatchEvent(new Event("mousedown", {pageX: 1, pageY: 1}));

或者

document.querySelector("canvas").dispatchEvent(new MouseEvent("mousedown", {pageX: 1, pageY: 1}));

或以上组合使用“click”而不是“mousedown”

我仍然收到我不理解的奇怪的“未定义”错误（除了我可以看到它们指的是“mousedown”）并且从未成功模拟点击。

一些工作（和不工作）的例子：

工作：显示点击坐标

工作：触发程序化点击

不工作：结合以上两者

不工作：尝试在没有 jQuery 的情况下触发程序化点击

Answer 1

您的 jQuery 方法的问题在于您将它与普通的 JavaScript 事件侦听器混合。 这不适用于 jQuery。

如果你想触发一个事件并使用 jQuery 来监听它，你必须使用它的.trigger()和.mousedown()方法。

这是一个例子：

 function getMousePosition(canvas, event) { let rect = canvas.getBoundingClientRect(); let x = event.clientX - rect.left; let y = event.clientY - rect.top; document.getElementById('output').innerText = x + ", " + y; } canvasElem = document.querySelector("canvas"); $('#canvas_element').mousedown(function(e) { getMousePosition(canvasElem, e); }); var e = jQuery.Event("mousedown", { clientX: 50, clientY: 50 }); $('#canvas_element').trigger(e);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas_element"></canvas> <div id="output"></div>

当然，上述所有操作也可以仅使用 JavaScript 完成。

 function getMousePosition(canvas, event) { let rect = canvas.getBoundingClientRect(); let x = event.clientX - rect.left; let y = event.clientY - rect.top; document.getElementById('output').innerText = x + ", " + y; } canvasElem = document.querySelector("canvas"); canvasElem.addEventListener("mousedown", function(e) { getMousePosition(canvasElem, e); }); canvasElem.dispatchEvent(new MouseEvent("mousedown", { clientX: 50, clientY: 50 }));

 <canvas id="canvas_element"></canvas> <div id="output"></div>