JavaScript：如何区分input number组件的增减按钮点击并执行对应操作

我明白你遇到的痛点了——用onmouseup和onmousedown确实没法直接区分number输入框的上下箭头，不管点哪个，这两个事件都会触发。不过通过对比数值的新旧值来判断是递增还是递减，这个思路完全可行，只是你现有的代码存在一些逻辑问题，我来帮你调整优化：

问题分析 #

你的原代码里，numberValueChange函数内部又额外绑定了一个change事件监听，这会导致每次触发onchange时都重复绑定一次回调，后续点击箭头时会执行多次逻辑；而且oldValue的初始化时机不对，没办法准确拿到每次变化前的数值。

优化后的解决方案 #

我们可以利用元素的dataset属性来存储上一次的数值，直接在onchange事件里完成新旧值对比和操作：

1. 修改Input标签

先简化input的事件绑定，去掉没用的onmouseup和onmousedown，保留核心属性：

<input type="number" 
       onkeydown="return false" 
       min="1" 
       max="@selvalue.Selection.MaximumChoice" 
       id="option_@selvalue.ValueId" 
       value="1" 
       onchange="handleNumberChange(@selvalue.ValueId, @selvalue.SelectionId);" 
       class="form-control mb-1" 
       style="visibility:hidden" />

2. 编写处理函数

function handleNumberChange(optionValueId, selectionId) {
  // 获取当前操作的number输入框和关联的number元素
  const input = document.getElementById(`option_${optionValueId}`);
  const numberEl = document.getElementById(`number_${selectionId}`);
  
  // 从dataset读取旧值，第一次执行时用当前value初始化
  const oldValue = parseInt(input.dataset.oldValue || input.value);
  const newValue = parseInt(input.value);

  if (newValue > oldValue) {
    // 点击向上按钮，执行递增逻辑
    console.log('数值增加了');
    // 更新目标option的value
    const targetOption = document.querySelector(`#multipleselection option[value*="${optionValueId}"]`);
    if (targetOption) {
      targetOption.value = `${optionValueId},${newValue}`;
    }
    // 关联number元素自增
    if (numberEl) {
      numberEl.value = parseInt(numberEl.value) + 1;
    }
  } else if (newValue < oldValue) {
    // 点击向下按钮，执行递减逻辑
    console.log('数值减少了');
    // 这里可以根据你的需求添加具体操作，比如原代码里的调整逻辑
    // 注意：input已经有min="1"，浏览器会自动阻止数值低于最小值
  }

  // 更新dataset里的旧值，供下次变化时对比
  input.dataset.oldValue = newValue;
}

关键说明 #

• 用dataset.oldValue存储上一次的数值，避免了重复绑定事件的问题，每次change触发时都能准确拿到新旧值
• 直接在onchange事件回调里处理逻辑，不需要额外绑定监听，避免多次执行的bug
• 简化了元素选择逻辑，用querySelector替代冗余的数组转换和过滤，代码更简洁高效

内容的提问来源于stack exchange，提问作者user19724638