javascript - 如何在Javascript中的div中的按钮中知道按下的按钮

Question

我有一个包含 4 个按钮的 div，当我单击任何按钮时，它会重定向到所有按钮的同一页面，我想知道用户在进入下一页之前按下了哪个按钮，我一直在尝试，但找不到。

这是我的代码:

             
     $( "#buttons" ).click(function() {
    alert('button'); 
window.location.href = "score.html";
});  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
  </div>

你有什么想法

Answer 1

点击开始的元素可用作传递到处理程序的事件对象上的目标，因此(但请参阅下面的更多内容):

// Accept the event arg -------v
$( "#buttons" ).click(function(e) {
    alert('button: ' + e.target.id); // <=== Use e.target.id to get its ID
    // window.location.href = "score.html"; (commented out for live demo)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
  </div>

请注意，只要在 #buttons div 内单击，就会发出警报，即使不是在按钮上。如果您只想点击按钮，则可以使用带有 .on 的选择器，以便仅在点击按钮时调用您。它会调用您的处理程序，就好像您已将处理程序直接挂接到按钮上一样，即使实际上您已将其挂接到 #button div 上，因此我们使用 this.id ID:

$( "#buttons" ).on("click", "button", function() {
    alert('button: ' + this.id);
    // window.location.href = "score.html"; (commented out for live demo)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
<div id="buttons">
<button type="button" id="button1">button 1</button>
<button type="button" id="button2">button 2</button>
<button type="button" id="button3">button 3</button>
<button type="button" id="button4">button 4</button>
  </div>