我有一個作業腳本，但我不知道如何使用addEventlistener而不是onfocus& onmousewheel。以及如何將其應用于許多元素？
const input = document.getElementsByClassName("change-onscroll")[0];
input.value = input.min ? input.min : 0;
input.onfocus = () => {
input.onmousewheel = (e) => {
if (deltaY > 0 && input.value <= input.min) return;
e.deltaY < 0 ? input.value : input.value--;
};
};<input type="number" name="num" class="change-onscroll" min="0" />uj5u.com熱心網友回復：
如果 OP 只想為聚焦的輸入元素啟用滾動行為，則 OP 需要明確地在任何此類元素或事件上注冊此類處理并在任何此類元素'focus'或'focusin'事件上再次取消注冊處理'blur''focusout'
function handleNumberTypeMouseScroll(evt) {
const { currentTarget: input, deltaY } = evt;
const minValue = parseInt(input.min, 10);
if (deltaY > 0 && input.value <= minValue) return;
deltaY < 0 ? input.value : input.value--;
}
function deregisterMousewheelHandling({ currentTarget }) {
currentTarget
.removeEventListener('mousewheel', handleNumberTypeMouseScroll);
}
function registerMousewheelHandling({ currentTarget }) {
currentTarget
.addEventListener('mousewheel', handleNumberTypeMouseScroll);
}
document
.querySelectorAll('.change-on-focused-scroll')
.forEach(elmNode => {
elmNode.addEventListener('blur', deregisterMousewheelHandling);
elmNode.addEventListener('focus', registerMousewheelHandling);
});<input type="number" name="num" class="change-on-focused-scroll" min="0" value="0" />
<input type="number" name="num" class="change-on-focused-scroll" min="5" value="5" />
<input type="number" name="num" class="change-on-focused-scroll" min="20" value="20" />轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/536999.html
上一篇：NOIP考綱（參考）