有没有办法点击画布中的特定点/元素（使用javascript，jquery或selenium）

Question

如何在画布中的特定位置应用单击？ （使用坐标对我来说似乎是最合乎逻辑的，但找不到任何方法来做到这一点，欢迎任何其他想法）。请注意，我无权访问创建画布的代码。

编辑：一些澄清，画布上有多个正在绘制的元素，我无法使用 jquery 选择但需要单击它们。我可以手动找到它们的坐标并进行一些计算，但是每次我尝试将单击或鼠标事件传递到该位置时，都不会被视为真正的鼠标单击（应该单击的按钮不是）。

Answer 1

尝试一下怎么样

canvas.on('click', function(e) {

    // calculate x y coordinates on canvas
    var x = e.pageX - $(this).offset().left,
    y = e.pageY - $(this).offset().top;

    // implement collision detection via the coordinates the element you want to click (assuming you know where it is)
    if (y > <elementY> && y < <elementY> + <elementHeight>
        && x > <elementX> && x < <elementX> + <elementWidth>) {
        alert('found it');
    }
});

我没有时间测试该片段。如果您知道画布中元素的 x 和 y 坐标，该代码可能就能解决问题。

我尝试用该片段做的是通过

elmentY

和

elementY + elementHeight

以及

elementX

和

elementX + elementWidth

模拟边界框。如果您知道所有这些值，您可以简单地检查点击事件的

x

和

y

值是否落在该框中。

编辑

如果想在某个位置触发点击事件，需要预先定义clickEvent并设置pageX和pageY属性。

var e = new jQuery.Event("click");
e.pageX = 10;
e.pageY = 10;
$(<canvas>).trigger(e);

您可能还必须在计算中包括画布的偏移量。

Answer 2

我知道你发这篇文章已经7年了，但你弄清楚了吗？我正在为同样的问题苦苦挣扎，但我无法弄清楚。