Question

我正在使用带有自定义GUI的html5画布制作绘图应用程序。我有一个鼠标按下事件监听器，当鼠标关闭时调用一个函数。在这个函数中，我得到了鼠标所在位置的x和y坐标。我打算使用if和if语句检查用户是否点击了任何按钮，但由于屏幕上有大约20个按钮，这绝对不是最有效的检查方式。我想为每个按钮创建一个按钮类和对象，并将它们添加到数组中。然而，这种方法需要大量的硬编码，因为每个按钮具有独特的功能和x y位置。

解决这个问题的最佳方式是什么？我感谢任何帮助或建议！

Answer 1

为什么不给每个人一个id

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>

JS：

document.getElementById("b1").addEventListener("click", function(){
   //do something... 
});

document.getElementById("b2").addEventListener("click", function(){
   //do something else... 
});

Answer 2

为每个按钮指定一个ID并使用CSS定位它们。
然后使用最初可以在循环中绑定的共享处理程序：
var buttons = document.querySelectorAll("buttons"); // or query on parent element for(var i = 0; i < buttons.length; i++) buttons[i].addEventListener("click", handler);
在处理程序中，只需检查单击了哪个按钮，然后分配一个功能：
function handler() { switch(this.id) { // "this" will be the button that was clicked case "btnBrush" : return doSomething1(); case "btnEraser": return doSomething2(); ... } }

多个gui按钮问题

2 个答案: