两个表单没有检测到两个脚本keydown

Question

嘿，我有一个简单的代码，有两个表单和两个javascript。当我点击数字键1或9应该是发送表格，并只使用最后一个表格。如果我切换javascript代码，最后一个将是键码49（1），那么数字1正在工作，但数字9没有。问题是因为在同一页面上我有2个单独的表格

function submitForm() {
    document.priceOptionForm.submit();
    document.priceOptionForm.method='post';
}
document.onkeydown = function () {
    if (window.event.keyCode == '49') {
        submitForm();
    }
}
document.getElementById("profile_price").onclick = submitForm;

function submitForm2() {
    document.priceOptionForm2.submit();
    document.priceOptionForm2.method='post';
}
document.onkeydown = function () {
    if (window.event.keyCode == '57') {
        submitForm2();
    }
}
document.getElementById("profile_price2").onclick = submitForm2;

<form action="" method="post" class="priceOptionForm" name="priceOptionForm">
    <input name="paypal_email" type="text" value="whatever" id="email">
    </label>
<a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>

</form>


<form action="" method="post" class="priceOptionForm2" name="priceOptionForm2">
    <input name="paypal_email" type="text" value="whatever" id="email">
    </label>
<a href="javascript:void(0);" class="bluebtn" id="profile_price2" style="width:60px;margin-top:5px;">Save all</a>

</form>

Answer 1

元素每个事件类型只能有一个“直接”事件回调。通过第二次使用document.onkeydown，您将覆盖第一次。要么将所有代码放在一个回调函数中，要么（建议这样做）使用addEventListener('keydown', callbackFunction)。这样，每个元素的每个事件类型都可以有多个回调

您应该为每个事件执行此操作，因为即使它现在有效，您的事件代码也很容易被其他地方覆盖。

function submitForm() {
  document.priceOptionForm.method = 'post';
  document.priceOptionForm.submit();
}
document.addEventListener('keydown', function(e) {
  if (e.keyCode == '49') {
    console.log(1)
    submitForm();
  }
})
document.getElementById("profile_price").addEventListener('click', submitForm);

function submitForm2() {
  document.priceOptionForm2.method = 'post';
  document.priceOptionForm2.submit();
}
document.addEventListener('keydown', function(e) {
  if (e.keyCode == '57') {
    console.log(9)
    submitForm2();
  }
})
document.getElementById("profile_price2").addEventListener('click', submitForm2);

<form action="" method="post" class="priceOptionForm" name="priceOptionForm">
  <input name="paypal_email" type="text" value="whatever" id="email">
  </label>
  <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>

</form>


<form action="" method="post" class="priceOptionForm" name="priceOptionForm2">
  <input name="paypal_email" type="text" value="whatever" id="email">
  </label>
  <a href="javascript:void(0);" class="bluebtn" id="profile_price2" style="width:60px;margin-top:5px;">Save all</a>

</form>

Answer 2

我认为问题是因为你将监听器直接传递给document.onkeydown两次。通过这样做，您只需通过第二个侦听器覆盖document.onkeydown的第一个侦听器。您应该使用addEventListener添加事件侦听器，以便两个侦听器都将保持不变。

document.addEventListener('keydown', function listenerOne () {})

document.addEventListener('keydown', function listenerTwo () {})