Erstellen Sie ein Klickereignis in der Mitte eines Elements/Canvas Elements?

Question

Ich habe Code gesehen und verwendet, mit dem Sie ein Klickereignis für ein Element erstellen können, aber anscheinend werden diese Klickereignisse an den 0,0 Koordinaten des Elements erstellt. Ich habe ein Canvas-Element, für das ich ein Klickereignis in der Nähe des Mittelpunkts benötige.

Wie kann ich ein Klickereignis nahe der Mitte eines Elements erstellen?

Zum Beispiel sagen, dass ich auf der Stelle in 20px, 30px dieses Elements klicken wollte:

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

Ich habe versucht, die Einstellung der Mausereigniseigenschaften clientX und clientY, aber das hat nicht registrieren den Klick Wo sollte es so sein Ich denke, diese Eigenschaften tun nicht, was ich dachte, sie taten.

Answer 1

Nur durch Überprüfen der Dokumentation für MouseEvent auf MDN, könnten Sie Folgendes versuchen. Ich habe keine Möglichkeit gesehen, die Pixel im Element selbst auszuwählen, aber Sie können die gewünschte Position im Fenster mithilfe der Ergebnisse der Methode getBoundingClientRect für Ihr Canvas-Element berechnen.

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