HTML5 INPUT type='number' - 区分焦点和值更改鼠标点击

Question

在 HTML5 INPUT type='number' 中，用户可以通过单击作为 INPUT 框一部分的向上/向下箭头来更改值。用户还可以单击框以获得焦点或编辑其内容。

有什么简单的方法可以区分click 触发器中的这两个活动吗？

---

来自@cvsguimaraes 的回答，更好地证明了理论。

使用他的方法，这是我完成的（？）版本。目的：确保在使用 +/- 更改数据时调用常规 change 触发器。

// input/mouseup triggers to call change from +/- mouse clicks
// want to wait 500ms before calling change in case successive clicks
render.inputCh = false;
render.inputCt = 0;
render.inputFn  = function(e) {
    render.inputCh = true;
}
render.mouseupFn  = function(e) {
    if( render.inputCh ) {
        render.inputCh = false;
        render.inputCt++;
        setTimeout( next, 500 );
    }       
    function next() {
        render.inputCt--;
        if( render.inputCt ) return;
        var change = document.createEvent("Event");
        change.initEvent('change',true,true);
        e.target.dispatchEvent(change);
    }
}

// using input/mouseup triggers
document.getElementById('number').addListener('input',render.inputFn,true);
document.getElementById('number').addListener('mouseup',render.mouseuptFn,true);

// normal change trigger - will be called normally and via +/- mouse click
document.getElementById('number').addListener('change',changeFn,false);

到目前为止，在 chrome 上它工作得非常完美除了，当您从 ITEM 移除焦点时，change 触发器将再次启动。如果先前的更改调用来自mouseup，我通过使用停止传播的低级别更改触发器解决了这个问题。

Answer 1

Here 是一个演示，展示了如何捕获和分析哪些事件会更改输入以及以何种顺序更改。

html:

<input type="number" id="number" />

脚本：

var input = document.getElementById('number'),
    events = [
        "click",
        "mousedown",
        "mouseup",
        "focus",
        "change",
        "input",
        "keydown",
        "keypress",
        "keyup"
    ];
events.forEach(function(ev) {
    input.addEventListener(ev, function() {
        console.log(ev, ' => ', input.value);
    }, false);
});

Answer 2

当用户通过单击向上/向下箭头更改值时，input 事件会在 mousedown 和 mouseup 之间方便地触发。

const input = document.getElementById('age')
const on = (ev, fn) => input.addEventListener(ev, fn)

const status = document.getElementById('status')
const write = (...txt) => status.innerText = txt.join()

let lastEv = 'none';
on('keypress', () => lastEv = 'keypress')
on('mousedown', () => lastEv = 'mousedown')

on('input', () => {
  if(lastEv == 'mousedown') write('changed from mouse', input.value);
  if(lastEv == 'keypress') write('changed from keyboard', input.value)
});

<input id="age" type="number" value=30> <br>
<div id="status"></div>