在 HTML 的同一元素中使用多个事件

【问题标题】：Using more than one event in the same element in HTML在 HTML 的同一元素中使用多个事件
【发布时间】：2017-03-14 06:46:26
【问题描述】：

我试图在用户单击按钮和/如果用户按下回车键时触发功能。我不确定如何将两个事件存储在同一个元素中。

 <td> <input type= "button" disabled id ="e2" value="Exercise 2" onclick ="loadQsets(2);setRadioValues(2);disableInput() ;" /></td>

如何在同一个元素中同时使用 onclick 事件和 enter 键事件来触发同一个函数？

【问题讨论】：

可以使用javascript的onkeypress事件

标签： javascript html function events

【解决方案1】：

您需要处理keydown 事件并将您的逻辑放在if statement 下

参见示例。 13 是Enter 的键码

document.getElementById('inp').addEventListener('keydown', function(e){
  if(e.keyCode === 13){
     console.log('Enter is pressed !');
  }
});

&lt;input id="inp"&gt;

【讨论】：

【解决方案2】：

 &lt;td&gt; &lt;input type= "button" disabled id ="e2" value="Exercise 2" onclick ="loadQsets(2);setRadioValues(2);disableInput() ;" /&gt;&lt;/td&gt;

window.onload=function(){
  var btn = document.getElementById('e2');
  
  function handleStuff() {
    loadQsets(2); 
    setRadioValues(2);
    disableInput();
  }
  
  btn.onclick = function() { 
    handleStuff();
  };
  
  btn.onkeydown = function() {
    handleStuff();
  }
}

 &lt;td&gt; &lt;input type= "button" disabled id ="e2" value="Exercise 2" /&gt;&lt;/td&gt;

【讨论】：