删除选择下拉菜单的键位错误

Question

我有一个简单的 HTML 表单：

<form>
    <select>
        <option value="" selected>Select an option</option>
        <option  value="Warrior">Warrior</option>
         <option value="Paladin">Paladin</option>
        <option value="Mage">Mage</option>
        <option value="Shaman">Shaman</option>
        <option value="Warlock">Warlock</option><option value="Priest">Priest</option><option value="Druid">Druid</option><option value="Hunter">Hunter</option>
       <option value="Rogue">Rogue</option>
       </select>
    <p></p>
<br>
    Stamina
    <br>
    <input type="number" name="stamina" placeholder="0" />
<br>
<span id="staminaresult"></span>

js根据用户在输入框中的输入使用inner.HTML返回结果，但也强制用户从select元素中选择一个选项：

$("form").on('keyup change', function (e){
    e.preventDefault();
    var selectedValue =

// Stamina

$('select').val();
    var stamina = $('input[name=stamina]').val();

// Force class selection

    if (!selectedValue) {
        return alert('You must choose your class');
    }

// Stamina calculation

        stamina = stamina * 10;

// Stamina result   

  document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')

因此，如果他们 .keyup 在其中一个输入框中没有做出选择，他们会收到一个错误对话框。按预期工作。

但是，当用户然后单击选择框以修复此错误时，他们会收到第二个错误对话框，因为我认为 js 将其注册为另一个 .keyup！

如何更改我的代码以禁用选择元素上的 .keyup 功能，以便用户不会收到第二个错误对话框？

完整上下文请参见此处的 jsfiddle：https://jsfiddle.net/ejnLbyug/

谢谢， T

Answer 1

您的处理程序所附加的问题：

$("form").on('keyup change', function (e){

这意味着 两个 keyup 和 change 事件都会触发监听器。如果发生 keyup 事件，并且您的 alert 窃取焦点，则焦点将不再位于 input 上，从而导致输入中的 change 事件。

尽管您可以通过检查事件的 target 是否是您的数字输入字段之一来修复它，如果是，并且如果事件是 change 事件，则立即返回：

$("form").on('change keyup', function (e){
  if (e.target.type === 'number' && e.type === 'change') {
    return;
  }

$("form").on('change keyup', function(e) {
  if (e.target.type === 'number' && e.type === 'change') {
    return;
  }
  e.preventDefault();
  var selectedValue =

    // Stamina

    $('select').val();
  var stamina = $('input[name=stamina]').val();

  // Force class selection

  if (!selectedValue) {
    return alert('You must choose your class');
  }

  // Stamina calculation

  stamina = stamina * 10;

  // Print class selection

  document.getElementById('classheader').innerHTML = (selectedValue);

  // Stamina result   

  document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')

  // Strength - attack power calculation

  $('select').val();
  var strength = $('input[name=strength]').val();

  if (selectedValue === "Warrior") {
    strength = strength * 2;
  } else if (selectedValue === "Paladin") {
    strength = strength * 2;
  } else if (selectedValue === "Mage") {
    strength = strength * 2;
  } else if (selectedValue === "Shaman") {
    strength = strength * 2;
  } else if (selectedValue === "Warlock") {
    strength = strength * 2;
  } else if (selectedValue === "Priest") {
    strength = strength * 2;
  } else if (selectedValue === "Druid") {
    strength = strength * 2;
  } else if (selectedValue === "Hunter") {
    strength = strength * 1;
  } else {
    strength = strength * 1;
  }

  // Strength - subsequent DPS calculation

  $('select').val();
  var strengthdps = $('input[name=strength]').val();

  strengthdps = strength / 14;
  strengthdps = strengthdps.toFixed(2);

  // Strength - attack power result

  document.getElementById('strengthresult').innerHTML = ('+' + strength + ' Melee Attack Power' + ' (+' + strengthdps + ' DPS)')

  // Strength - block calculation

  $('select').val();
  var strengthblock = $('input[name=strength]').val();

  if (selectedValue === "Warrior") {
    strengthblock = strengthblock / 20;
  } else if (selectedValue === "Paladin") {
    strengthblock = strengthblock / 20;
  } else if (selectedValue === "Shaman") {
    strengthblock = strengthblock / 20;
  } else {
    strengthblock = 0;
  }

  strengthblock = strengthblock.toFixed(2);

  // Strength - block result

  document.getElementById('strengthblockresult').innerHTML = (', +' + strengthblock + ' Block')

  // Agility - attack power calculation

  $('select').val();
  var agility = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agility = agility * 1;
  } else if (selectedValue === "Rogue") {
    agility = agility * 1;
  } else {
    agility = 0;
  }

  // Agility - subsequent DPS calculation

  $('select').val();
  var agilitydps = $('input[name=agility]').val();

  agilitydps = agility / 14;
  agilitydps = agilitydps.toFixed(2);

  // Agility - attack power result

  document.getElementById('agilityresult').innerHTML = ('+' + agility + ' Melee Attack Power' + ' (+' + agilitydps + ' DPS)')

  // Agility - cat attack power calculation

  $('select').val();
  var agilitycat = $('input[name=agility]').val();

  if (selectedValue === "Druid") {
    agilitycat = agilitycat * 1;
  } else {
    agilitycat = 0;
  }

  // Agility - cat subsequent DPS calculation

  $('select').val();
  var agilitydpscat = $('input[name=agility]').val();

  agilitydpscat = agilitycat / 14;
  agilitydpscat = agilitydpscat.toFixed(2);

  // Agility - cat attack power result

  document.getElementById('agilitycatresult').innerHTML = (', +' + agilitycat + ' Melee Attack Power (in Cat Form)' + ' (+' + agilitydpscat + ' DPS)')

  // Agility - ranged attack power calculation

  $('select').val();
  var agilityranged = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agilityranged = agilityranged * 2;
  } else {
    agilityranged = 0;
  }

  // Agility - ranged subsequent DPS calculation

  $('select').val();
  var agilitydpsranged = $('input[name=agility]').val();

  agilitydpsranged = agilityranged / 14;
  agilitydpsranged = agilitydpsranged.toFixed(2);

  // Agility - ranged attack power result

  document.getElementById('agilityrangedresult').innerHTML = (', +' + agilityranged + ' Ranged Attack Power' + ' (+' + agilitydpsranged + ' DPS)')

  // Agility - crit calculation

  $('select').val();
  var agilitycrit = $('input[name=agility]').val();

  if (selectedValue === "Hunter") {
    agilitycrit = agilitycrit / 53;
  } else if (selectedValue === "Rogue") {
    agilitycrit = agilitycrit / 29;
  } else {
    agilitycrit = agilitycrit / 20;
  }

  agilitycrit = agilitycrit.toFixed(2);

  // Agility - crit result

  document.getElementById('agilitycritresult').innerHTML = (', +' + agilitycrit + '% Crit')

  // Agility - dodge calculation

  $('select').val();
  var agilitydodge = $('input[name=agility]').val();
  if (selectedValue === "Hunter") {
    agilitydodge = agilitydodge / 26.5;
  } else if (selectedValue === "Rogue") {
    agilitydodge = agilitydodge / 14.5;
  } else {
    agilitydodge = agilitydodge / 20;
  }

  agilitydodge = agilitydodge.toFixed(2);

  // Agility - dodge result

  document.getElementById('agilitydodgeresult').innerHTML = (', +' + agilitydodge + '% Dodge')

  // Agility - armor calculation

  $('select').val();
  var agilityarmor = $('input[name=agility]').val();

  agilityarmor = agilityarmor * 2;

  // Agility - armor result

  document.getElementById('agilityarmorresult').innerHTML = (', +' + agilityarmor + ' Armor')

  // Intellect - mana calculation

  $('select').val();
  var intellect = $('input[name=intellect]').val();

  if (selectedValue === "Rogue") {
    intellect = 0;
  } else if (selectedValue === "Warrior") {
    intellect = 0;
  } else {
    intellect = intellect * 15;
  }

  // Intellect - mana result

  document.getElementById('intellectresult').innerHTML = ('+' + intellect + '  Mana')

  // Intellect - crit calculation

  $('select').val();
  var intellectcrit = $('input[name=intellect]').val();

  if (selectedValue === "Warlock") {
    intellectcrit = intellectcrit / 60.6;
  } else if (selectedValue === "Druid") {
    intellectcrit = intellectcrit / 60;
  } else if (selectedValue === "Mage") {
    intellectcrit = intellectcrit / 59.5;
  } else if (selectedValue === "Shaman") {
    intellectcrit = intellectcrit / 59.5;
  } else if (selectedValue === "Priest") {
    intellectcrit = intellectcrit / 59.2;
  } else if (selectedValue === "Paladin") {
    intellectcrit = intellectcrit / 29.5;
  } else {
    intellectcrit = intellectcrit / 20;
  }

  intellectcrit = intellectcrit.toFixed(2);

  // Intellect - crit result

  document.getElementById('intellectcritresult').innerHTML = (', +' + intellectcrit + '  % Crit')

  // Spirit - mana regen calculation

  $('select').val();
  var spiritmana = $('input[name=spirit]').val();

  if (selectedValue === "Druid") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Hunter") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Paladin") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Shaman") {
    spiritmana = 15 + (spiritmana / 5);
  } else if (selectedValue === "Mage") {
    spiritmana = 13 + (spiritmana / 4);
  } else if (selectedValue === "Priest") {
    spiritmana = 13 + (spiritmana / 4);
  } else if (selectedValue === "Warlock") {
    spiritmana = 8 + (spiritmana / 4);
  } else {
    spiritmana = 0;
  }

  spiritmana = spiritmana.toFixed(2);

  // Spirit - mana regen result

  document.getElementById('spiritmanaresult').innerHTML = ('+' + spiritmana + '  Mana per Tick')

  // Spirit - health regen calculation

  $('select').val();
  var spirithealth = $('input[name=spirit]').val();

  if (selectedValue === "Druid") {
    spirithealth = 0.09 * (spirithealth + 6.5);
  } else if (selectedValue === "Hunter") {
    spirithealth = 0.25 * (spirithealth + 6);
  } else if (selectedValue === "Paladin") {
    spirithealth = 0.25 * (spirithealth + 6);
  } else if (selectedValue === "Shaman") {
    spirithealth = 0.11 * (spirithealth + 7);
  } else if (selectedValue === "Mage") {
    spirithealth = 0.1 * (spirithealth + 6);
  } else if (selectedValue === "Priest") {
    spirithealth = 0.1 * (spirithealth + 6.5);
  } else if (selectedValue === "Warlock") {
    spirithealth = 0.07 * (spirithealth + 6);
  } else if (selectedValue === "Warrior") {
    spirithealth = 0.8 * (spirithealth + 6);
  } else {
    spirithealth = 0.5 * (spirithealth + 2);
  }

  spirithealth = spirithealth.toFixed(2);

  // Spirit - health regen result

  if (spirithealth === 0) {
    return;
  } else {
    document.getElementById('spirithealthresult').innerHTML = ('+' + spirithealth + ' Health per Tick')
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select>
    <option value="" selected>Select an option</option>
    <option value="Warrior">Warrior</option>
    <option value="Paladin">Paladin</option>
    <option value="Mage">Mage</option>
    <option value="Shaman">Shaman</option>
    <option value="Warlock">Warlock</option>
    <option value="Priest">Priest</option>
    <option value="Druid">Druid</option>
    <option value="Hunter">Hunter</option>
    <option value="Rogue">Rogue</option>
  </select>
  <p></p>
  <br> Stamina
  <br>
  <input type="number" name="stamina" placeholder="0" />
  <br> Strength
  <br>
  <input type="number" name="strength" placeholder="0" />
  <br> Agility
  <br>
  <input type="number" name="agility" placeholder="0" />
  <br> Intellect
  <br>
  <input type="number" name="intellect" placeholder="0" />
  <br> Spirit
  <br>
  <input type="number" name="spirit" placeholder="0" />

  <p></p>
</form>

<p id="classheader">
</p>

Stamina:

<span id="staminaresult">
</span>
<br><br> Strength:

<span id="strengthresult"></span><span id="strengthblockresult"></span>
<br>
<br> Agility:

<span id="agilityresult">
</span><span id="agilitycatresult">
</span>
<span id="agilityrangedresult">
</span>
<span id="agilitycritresult">
</span>
<span id="agilitydodgeresult">
</span>
<span id="agilityarmorresult">
</span>
<br>
<br> Intellect:

<span id="intellectresult">
</span>
<span id="intellectcritresult">
</span>
<br>
<br> Spirit:

<span id="spiritmanaresult">
</span>
<span id="spirithealthresult">
</span>
<br>
<br>

使用适当的模态而不是 alert 会更优雅，这对用户非常不友好（窃取焦点、块等）