确定在 div 中单击了哪个按钮答案

【问题标题】：Determine which button was clicked inside a div确定在 div 中单击了哪个按钮
【发布时间】：2015-05-28 07:05:47
【问题描述】：

我有以下 HTML 代码（我无法更改），我想确定其中从 A 到 Z 的哪个按钮被单击。知道我该怎么做吗？这是我尝试过的，但我总是得到“字母表”的结果。我也可以写：

document.getElementById("A").onclick = button;
document.getElementById("B").onclick = button;

myMain 函数内等等，但是有没有简单的解决方案？

<html>

<head>
  <script>
    function myMain() {
      document.getElementById("alphabet").onclick = button;
    }

    function button() {
      alert(this.id);
    }

    window.onload = myMain;
  </script>
</head>

<body>
  <div id="alphabet">
    <button id="A">A</button> <button id="B">B</button> <button id="C">C</button> <button id="D">D</button> <button id="E">E</button> <button id="F">F</button>
    <button id="G">G</button> <button id="H">H</button> <button id="I">I</button> <button id="J">J</button> <button id="K">K</button> <button id="L">L</button>
    <button id="M">M</button> <button id="N">N</button> <button id="O">O</button> <button id="P">P</button> <button id="Q">Q</button> <button id="R">R</button>
    <button id="S">S</button> <button id="T">T</button> <button id="U">U</button> <button id="V">V</button> <button id="W">W</button> <button id="X">X</button>
    <button id="Y">Y</button> <button id="Z">Z</button>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript html dom-events

【解决方案1】：

你可以使用事件对象

window.onload = myMain;

function myMain() {
  document.getElementById("alphabet").onclick = buton;
}

function buton(e) {
  if (e.target.tagName == 'BUTTON') {
    alert(e.target.id);
  }
}

<div id="alphabet">
  <button id="A">A</button>
  <button id="B">B</button>
  <button id="C">C</button>
  <button id="D">D</button>
  <button id="E">E</button>
  <button id="F">F</button>
  <button id="G">G</button>
  <button id="H">H</button>
  <button id="I">I</button>
  <button id="J">J</button>
  <button id="K">K</button>
  <button id="L">L</button>
  <button id="M">M</button>
  <button id="N">N</button>
  <button id="O">O</button>
  <button id="P">P</button>
  <button id="Q">Q</button>
  <button id="R">R</button>
  <button id="S">S</button>
  <button id="T">T</button>
  <button id="U">U</button>
  <button id="V">V</button>
  <button id="W">W</button>
  <button id="X">X</button>
  <button id="Y">Y</button>
  <button id="Z">Z</button>
</div>

【讨论】：

正是我需要的！谢谢+1

【解决方案2】：

事件处理函数在它们绑定到的元素的上下文中触发，而不是在用于触发事件的元素的上下文中触发。

你需要捕获事件对象：

function button(event){
  // …
}

然后查看点击的目标：

const element = event.target;

然后您可以查看该元素的id：

console.log(element.id);

【讨论】：

【解决方案3】：

尝试下面解释的代码：

 alert(e.target.id);

您可以使用e.target.id. e.target 表示DOM 对象，您可以访问它的所有属性和方法。

        window.onload = myMain;
        function myMain() {
            document.getElementById("alphabet").onclick = buton;
        }
      
function buton(e) {
   
    alert(e.target.id);

}

<body>
    <div id="alphabet">
        <button id="A">A</button> <button id="B">B</button> <button id="C">C</button> <button id="D">D</button> <button id="E">E</button> <button id="F">F</button> 
        <button id="G">G</button> <button id="H">H</button> <button id="I">I</button> <button id="J">J</button> <button id="K">K</button> <button id="L">L</button> 
        <button id="M">M</button> <button id="N">N</button> <button id="O">O</button> <button id="P">P</button> <button id="Q">Q</button> <button id="R">R</button> 
        <button id="S">S</button> <button id="T">T</button> <button id="U">U</button> <button id="V">V</button> <button id="W">W</button> <button id="X">X</button> 
        <button id="Y">Y</button> <button id="Z">Z</button>
    </div>
</body>

Here 是工作小提琴

【讨论】：

这会抛出异常，因为e 没有定义。
@Quentin 请检查整个代码。在小提琴中也尝试过
重新编辑：“只改变一行”——你已经改变了不止一行。
@Quentin 感谢您指出这一点。我认为 OP 有代码：alert(this.id); ，我用 alert(e.target.id) 实现了一些代码修改；这就是该回复背后的原因..如果弄错了，无论如何都会编辑该行，，

【解决方案4】：

var buttonElements = document.querySelectorAll('#alphabet button');
for (var i = 0;i < buttonElements.length;i++){
    buttonElements[i].addEventListener('click',function(){
        alert(this.getAttribute('id'));
    });
};

【讨论】：

【解决方案5】：

改用 Jquery

HTML

<div>
   <input type="button" id="A"/>
   <input type="button" id="B"/>
 </div>

Javascript

 $("button").Click(function(){
       alert($(this).attr("id"))
  })

【讨论】：