模拟鼠标点击 HTML5 canvas 元素上的 (x, y)

Question

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

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

使用 this 答案，我能够以编程方式模拟鼠标点击。但不幸的是，我需要取消-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'

我仍然遇到我不理解的奇怪 'undefined' 错误（除此之外我可以看到它们指的是 'mousedown'）并且从未成功模拟点击。

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

工作：Displays coordinates of clicks

工作：Fires a programmatic click

不工作：Combining the two above

不工作：Trying to fire a programmatic click without 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>

模拟鼠标点击 HTML5 canvas 元素上的 (x, y)

Simulating a mouse click at (x, y) on an HTML5 canvas element

javascript

events

mouseevent

html5-canvas