如何检测按下了哪个按钮

Question

我想知道在许多按钮的列表中按下了哪个按钮。 例如，如果第二个按钮被按下，那么代码会检测到第二个按钮被按下并返回类似[1]的内容。 但是，我不知道该怎么做。 当我搜索时，涉及 jQuery，但我没有使用 jQuery。 代码如下：

 var table = document.getElementById("Table"); function CreateRow() { var CoreButton = document.createElement("Button"); var ButtonText = document.createTextNode("Add"); CoreButton.appendChild(ButtonText); document.body.appendChild(CoreButton); var NewRow = table.insertRow(-1); var NewName = NewRow.insertCell(-1); var AddRow = NewRow.insertCell(-1); AddRow.id = "AddRow"; AddRow.className = "AddRow"; AddRow.appendChild(CoreButton); }

 <html> <table id = "Table"> <button onclick="CreateRow()">Add Button</button> </table>

我尝试使用 EventListner，将 EventListner 添加到创建的每个按钮中，但这并没有区分各个按钮。 请注意，每个按钮都有一个AddRow的 id 和一个 AddRow 的AddRow 。
如果有人可以帮忙，谢谢！

Answer 1

您可以从 1 开始向每个按钮添加类似数据属性的内容，并像这样设置 eventListener

这将在文档上设置一个 eventListener 并在点击目标与.AddRow class 的元素不匹配时返回。 如果匹配访问每个 e.target.dataset 的数据属性。

document.addEventListener('click', e => {
    if(!e.target.matches('.AddRow')) return;
    console.log(e.target.dataset.id);
});

按钮示例

<button class="AddRow" data-id="1"></button>

Answer 2

 var table = document.getElementById("Table"); function CreateRow(obj) { var row = parseInt(obj.getAttribute('data-row')); var CoreButton = document.createElement("Button"); CoreButton.classList.add('btn'); CoreButton.setAttribute('data-row', row+1); var ButtonText = document.createTextNode("Add"); CoreButton.appendChild(ButtonText); CoreButton.addEventListener('click',function(){CreateRow(CoreButton)}, false); document.body.appendChild(CoreButton); var NewRow = table.insertRow(-1); var NewName = NewRow.insertCell(-1); var AddRow = NewRow.insertCell(-1); AddRow.id = "AddRow"; AddRow.className = "AddRow"; }

 <table id = "Table"> <button data-row='1' onclick="CreateRow(this)">Add Button</button> </table>

我会使用上面的代码，在行变量中我会得到行号，然后使用我自己的逻辑来操作进一步的操作。

如何检测按下了哪个按钮

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-02-21 23:18:51

解决方案2
1 2021-02-21 23:24:17

如何检测按下了哪个按钮

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-02-21 23:18:51

解决方案2 1 2021-02-21 23:24:17

解决方案1
1 已采纳 2021-02-21 23:18:51

解决方案2
1 2021-02-21 23:24:17