确定在 div 中单击了哪个按钮
[英]Determine which button was clicked inside a div
问题描述
我有以下 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>
5 个解决方案
解决方案1
3 2015-05-28 07:09:13
事件处理函数在它们绑定到的元素的上下文中触发，而不是在用于触发事件的元素的上下文中触发。
您需要捕获事件对象：
function button(event){
// …
}
然后看一下点击的目标：
const element = event.target;
然后您可以查看该元素的id ：
console.log(element.id);
解决方案2
3 2015-05-28 07:09:51
您可以使用事件对象
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>
解决方案3
2 2015-05-28 07:34:54
尝试代码解释如下：
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>
这是工作小提琴
解决方案4
0 2015-05-28 07:08:51
var buttonElements = document.querySelectorAll('#alphabet button');
for (var i = 0;i < buttonElements.length;i++){
buttonElements[i].addEventListener('click',function(){
alert(this.getAttribute('id'));
});
};
解决方案5
-2 2015-05-28 07:16:33
改用 Jquery
HTML
<div>
<input type="button" id="A"/>
<input type="button" id="B"/>
</div>
Javascript
$("button").Click(function(){
alert($(this).attr("id"))
})
如何使该 div 的内容居中，该内容是在单击按钮时创建的并且位于 flex div 内？
[英]How to center this div's content, which is created when a button is clicked and is inside a flex div?
使用jquery动态确定特定类的哪个按钮被点击
[英]Dynamically determine which button of a particular class has been clicked with jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.