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)" />