onmouseover 在 onchange 起作用时不起作用？

Question

我有一个小脚本可以在禁用和不依赖于数字输入值之间切换按钮。当事件触发器为 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>

如果我从按钮中删除 inital disabled 属性，我的 else if toggle 工作，但第一个 if 从不将其关闭。关于 onmouseover 是否有什么东西阻止它检查数量值？

Answer 1

在 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;
    }

Answer 2

发生这种情况是因为您的输入被禁用并且没有反应试试这个代码，让我知道它是否适合你

<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>

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

onmouseover 在 onchange 起作用时不起作用？

onmouseover doesn't function when onchange does?

javascript

toggle

onmouseover