时间戳

首页 > 解决方案 > 当 onchange 起作用时，onmouseover 不起作用？

javascript - 当 onchange 起作用时，onmouseover 不起作用？

问题描述

我有一个小脚本，可以在禁用和不依赖于数字输入的值之间切换按钮。当事件触发器为 input.onchange 时，它​​的工作方式完全符合我的预期，但如果我尝试制作事件 button.onmouseover，它似乎不起作用。

这有效：

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input onchange="myFunction()" type="number" id="quantity" name="quantity" min="1" max="5">
  <input disabled id="submit" type="submit">
  <p id="number"></p>
</form>

<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
    y.toggleAttribute("disabled");
    } else if (y.hasAttribute("disabled") == false) {
    y.toggleAttribute("disabled");
    }
}
</script>

这不会：

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input onmouseover="myFunction()" disabled id="submit" type="submit">
  <p id="number"></p>
</form>

<script>
function myFunction() {
var x = document.getElementById("quantity");
var y = document.getElementById("submit");
if (x.value >= "5") {
    y.toggleAttribute("disabled");
    } else if (y.hasAttribute("disabled") == false) {
    y.toggleAttribute("disabled");
    }
}
</script>

如果我从按钮中删除了初始禁用属性，则我的 else if 切换可以工作，但第一个 if 永远不会将其关闭。onmouseover 有什么东西阻止它检查数量值吗？

标签： javascripttoggleonmouseover

解决方案

在 HTML 中，禁用的元素不会触发事件，您不能悬停或单击它们。您可以将此类元素包装在 div 中并在该 div 上触发鼠标悬停。这是代码：

<form action="/action_page.php">
   <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <div style="display: inline;padding: 10px;" id="wrapper_submit">
    <input disabled id="submit" type="submit">
  </div>
  <p id="number"></p>
 </form>
<script>
  // After page load
  window.onload = function(){
    // Get div and on its mouseover
    document.getElementById("wrapper_submit").onmouseover = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }
  }
</script>

编辑：鼠标悬停事件仅在光标位于其自身元素上时触发，如果子元素覆盖父元素则不会触发。在上述情况下，如果您从 [Div('wrapper_submit')] 中删除填充，则鼠标悬停事件将不起作用。使用鼠标输入事件，即使孩子覆盖父母 100% 也能正常工作。

document.getElementById("wrapper_submit").onmouseenter = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }

推荐阅读