除非我按回车键，否则更改事件不起作用

Question

我目前正在为电子商务开发数量选择器。数量选择器包括：

1. 减号按钮
2. 数量输入字段：每次用户点击任一数量按钮时，值都会更新
3. 数量文本：这是包含在<span> 标签中的数量
4. 加号按钮

这是数量选择器的 HTML 布局：

<div class="product-form__input product-form__quantity">
  <label class="form__label">
    Quantity
  </label>

  <button class="quantity__button minus no-js-hidden" name="minus" type="button" disabled>
    -
  </button>

  <input class="quantity__input"
  type="number"
  name="quantity"
  id="Quantity-{{ section.id }}"
  min="1"
  value="1"
  form="{{ product_form_id }}"
  >

  <span class="quantity__text">1</span>

  <button class="quantity__button plus" name="plus" type="button">
    +
  </button>
</div>

JavaScript如下图，其中quantityPicker.init()被调用，其中包括：

• 每次用户点击加减数量按钮时更新数量输入字段的值（调用quantityPicker.onButtonClick()函数）
• 当数量输入字段的值发生变化时，必须调用quantityPicker.onChange()函数。

// Quantity picker
let
  quantityFields = document.querySelectorAll(".quantity__input"),
  quantityButtons = document.querySelectorAll(".quantity__button"),
  quantityPicker = {
    onButtonClick: function (event) {
      let
        button = event.target,
        picker = button.closest(".product-form__quantity"),
        quantity = picker.querySelector(".quantity__input"),
        quantityValue = parseInt(quantity.value),
        max = quantity.getAttribute("max") ? parseInt(quantity.getAttribute("max")) : null

        if (button.classList.contains("plus") && (max === null || quantityValue + 1 <= null)) {
          quantity.value = quantityValue + 1
        }
        else if (button.classList.contains("minus")) {
          quantity.value = quantityValue - 1
        }
    },
    onChange: function (event) {
      let
        field = event.target,
        picker = field.closest(".product-form__quantity"),
        quantityText = picker.querySelector(".quantity__text"),
        shouldDisableMinus = parseInt(event.target.value) === parseInt(field.getAttribute("min")),
        shouldDisablePlus = parseInt(event.target.value) === parseInt(field.getAttribute("max")),
        minusButton = picker.querySelector(".quantity__button.minus"),
        plusButton = picker.querySelector(".quantity__button.plus")
        
      quantityText.innerText = event.target.value

      if (shouldDisableMinus) {
        minusButton.setAttribute("disabled", "disabled")
      } else if (minusButton.getAttribute("disabled") === true) {
        minusButton.removeAttribute("disabled")
      }

      if (shouldDisablePlus) {
        plusButton.setAttribute("disabled", "disabled")
      } else if (plusButton.getAttribute("disabled") === true) {
        plusButton.removeAttribute("disabled")
      }
    },
    init: function () {
      // when a button is clicked
      quantityButtons.forEach(quantityButton => {
        quantityButton.addEventListener("click", function (event) {
          quantityPicker.onButtonClick(event)
        })
      })

      // when a quantity is changed
      console.log(quantityFields)

      quantityFields.forEach(quantityField => {
        console.log(quantityField)

        quantityField.addEventListener("change", function (event) {
          console.log("Value changed!")
          quantityPicker.onChange(event);
        })
      })
    }
  }

  quantityPicker.init()

但是，我遇到的问题是，即使单击加号或减号按钮时值发生变化（如屏幕上的值变化所示），change 事件仍不起作用。

只有当我直接在输入中输入一个值，然后按 Enter / return 键时才会触发该事件。如何在每次更新值时调用 quantityPicker.onChange() 函数，而无需按 return 键？

Answer 1

我想出了这个问题的解决方案。如果change 和input 事件被以编程方式 更改，它们将不起作用。为了触发事件，我不得不使用dispatchEvent() 函数以编程方式触发这些事件，如下所示：

quantity.dispatchEvent(new Event('input'));

Answer 2

考虑使用input 事件。它在每个输入上触发