javascript输入数-检测增减

Question

对于数字，如果单击向上按钮，我希望它执行不同的操作，如果单击向下按钮，我希望它执行不同的操作。 我试图用 onmouseup 和 onmousedown 来捕捉它。 但仍然两者都被触发。 我如何知道是否单击了 number up 和 number down 被单击？ 我需要根据数字的前一个值和下一个值进行操作。 例如，数字的值为 12。如果用户将其递增并使其变为 13，我必须执行不同的操作。

<input type="number" onmouseup="alert('clicked up');" onmousedown="alert('clicked down');" onkeydown="return false" min="1" max="@selvalue.Selection.MaximumChoice" id="option_@selvalue.ValueId" value="1" onchange="numberValueChange(@selvalue.ValueId, this.value,@selvalue.SelectionId);" class="form-control mb-1" style="visibility:hidden" />

新添加的代码：

function numberValueChange(optionValueId, numberValue, selectionId) {

            var number = document.getElementById('number_' + selectionId);
            var thisnumber = document.getElementById('option_' + optionValueId);


            let oldValue = parseInt(thisnumber.value);

            thisnumber.addEventListener('change', (e) => {
                console.log('eski deger: ', oldValue);
                let newValue = parseInt(e.target.value);
                console.log('yeni deger: ', newValue);
                if (newValue > oldValue) {
                    console.log('bu deger arttı.');
                    var options = Array.from(document.querySelectorAll("#multipleselection option"))
                    options.filter(option => option.value.includes(optionValueId))[0].value = (optionValueId + ',' + numberValue);
                    number.value++;

                } else if (newValue < oldValue) {
                    console.log('bu deger azaldı.');
                    thisnumber.value--;
                }

            });

        }

Answer 1

onmouseup表示鼠标按钮已被释放，而不是鼠标单击了向上按钮。 只需使用change事件，然后编写一些代码来检测值是上升还是下降。

Answer 2

与其尝试检测鼠标点击，不如检测值的变化。 无论这些更改是如何进行的。

将值存储在某处，然后在输入更改时进行比较。 这将告诉您新值是更高还是更低。 例如：

 let myInput = document.querySelector('input'); let oldValue = parseInt(myInput.value || 0); function numberValueChange(el) { // other code you may have, etc. console.log('old value: ', oldValue); let newValue = parseInt(el.value); console.log('new value: ', newValue); if (newValue > oldValue) { console.log('The value increased.'); } else if (newValue < oldValue) { console.log('The value decreased.'); } oldValue = newValue; }

 <input type="number" onkeydown="return false" value="1" onchange="numberValueChange(this)" />