javascript - 在画布上的输入类型按钮上触发鼠标单击

Question

我正在使用 html 5 画布开发照片编辑器程序，并且我正在使用该方法创建一个窗口，然后用户可以利用该窗口来查找他们的图像。问题是，当他们单击我的画布应用程序中的“按钮”而不是在侧面有一个 html 按钮或在某处重叠时，我希望能够做到这一点。基本上我需要这样做，所以当用户在画布中单击我的按钮时，它会触发按钮上的单击事件。我已经对此进行了一些谷歌搜索，但我无法找到我正在寻找的东西......

多谢你们！

Answer 1

没关系，我想通了...由于安全原因，您实际上无法从javascript访问输入类型=“文件”单击事件。

Answer 2

如果您使用的是 onclick 事件，则需要以下内容：

编辑：所以你的画布上有一个应该点击的矩形区域？如果是这样，您定义了 4 个限制leftLimit、rightLimit、topLimit和bottomLimit，并在单击时执行此函数：

var canvas = document.getElementById('yourCanvasId');
    button = document.getElementById('yourButtonId');
canvas.onclick = function(event) {
event = event || window.event;
var x = event.pageX - canvas.offsetLeft,
    y = event.pageY - canvas.offsetTop;
if(x > leftLimit && x < rightLimit && y > topLimit && y < bottomLimit) {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("click",1,1,document.defaultView,0,0,0,0,0,0,0,0,0,0,button);
    button.dispatchEvent(e);
    }
}