在元素/画布元素的中间创建一个click事件？

Question

我已经看过并使用了允许您在元素上创建click事件的代码，但似乎这些click事件是在元素的0,0坐标处创建的。我有一个canvas元素，我需要在它的中心附近创建一个click事件。

如何在元素中心附近创建点击事件？

比如说我想点击20px，30px这个元素的位置：

<canvas style="width: 50px; height: 50px;">

我已经尝试过设置鼠标事件属性clientX和clientY，但是它没有注册应该点击的地方，所以我猜这些属性不会做我认为他们的事情那样。

Answer 1

只需检查MDN上MouseEvent的文档，您就可以尝试以下操作。我没有看到在元素本身中选择像素的方法，但您可以使用canvas元素上的getBoundingClientRect方法的结果来计算窗口中所需的位置。

var canvasBCR = canvas.getBoundingClientRect();
canvas.dispatchEvent(new MouseEvent("click", {clientX: canvasBCR.left + 20, clientY: canvasBCR.top + 30}));