如何处理外部 .js 文件中的 canvas.onclick event.offset？

Question

我有基本的canvas

<body>
    <canvas id="Canvas" width="500" height="704" style="border:1px solid #000000;"> </canvas>
</body>

并且我正在尝试获取 canvas 中 onClick 事件的坐标。我发现一个很好的 post 关于用 event.offsetX () 做它但是，该代码只有当 js 脚本在同一个文件中时才有效。我想要做的是在一个单独的 "app.js" 文件中的函数中处理坐标。我尝试在 canvas 的 onClick 属性中引用我想处理数据的函数（我们称之为 "click()" ）。我不确定那是不是错误的方法，或者我错过了什么但没有用。我只是用 javascript 来计算。理想情况下，我希望 html 文件中根本没有 javascript，但我对任何有效的方法都很满意。

谢谢

Answer 1

这是针对元素的全局点击，但它仍然捕获点击在 canvas 内的位置：

let ctx = mycanvas.getContext("2d");
if(ctx) mycanvas.addEventListener("click",event =>{console.log(event.offsetX);});

<canvas id="mycanvas" height="500" width="500"></canvas>

如何处理外部 .js 文件中的 canvas.onclick event.offset？

How to handle canvas.onclick event.offset in external .js file?

javascript

canvas

onclick

html5-canvas

mouseevent