要素/キャンバス要素の途中でクリックイベントを作成しますか？

Question

要素でクリックイベントを作成できるコードを見てきましたが、これらのクリックイベントは要素の0,0座標に作成されているようです。キャンバスの要素があり、その中心付近に作成されたクリックイベントが必要です。

要素の中央付近でクリックイベントを作成するにはどうすればよいですか？例えば

は、この要素の30px、私は20ピクセルにスポットをクリックしてみたかったと言う：

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

私は、マウスイベントプロパティclientXとclientYプロパティを設定しようとしたが、それはクリックを登録しませんでしたどこにあるべきなのか、私はそれらのプロパティが私が思ったことをしないと思う。

Answer 1

ただ、MDNのMouseEventのマニュアルを確認することで、あなたは以下のことを試みることができます。要素自体のピクセルを選択する方法はありませんでしたが、キャンバス要素のgetBoundingClientRectメソッドの結果を使用して、ウィンドウ上で必要な位置を計算することができました。

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