Question

我正在使用html 5 canvas编写照片编辑器程序，我正在使用该方法创建一个窗口，用户可以使用该窗口查找其图像。问题是我希望能够在我的画布应用程序中点击“按钮”而不是在侧面有一个html按钮或在某处重叠时能够这样做。基本上我需要这样做，当用户点击画布中的我的按钮时，它会触发按钮上的click事件。我已经做了一些Google搜索，但我找不到我正在寻找的东西......

谢谢你们！

Answer 1

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

编辑，因此您的画布中应该单击一个矩形区域？如果是这样，你定义了4个限制 leftLimit ， rightLimit ， topLimit 和 bottomLimit ，并执行此功能onclick：

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);
    }
}

Answer 2

别介意我想出来......由于安全原因，你实际上无法从javascript访问输入type =“file”点击事件。

从画布触发鼠标单击输入类型按钮

2 个答案: