Question

嘿，我有一个带有两个表单和两个javascript的简单代码。当我单击num键时，应该发送表格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

每个事件类型的一个元素只能有一个'direct'事件回调。通过第二次使用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 () {})

两种形式未检测到两个脚本键盘按下

2 个答案: