HTML5 输入类型='数字' - 区分焦点和值更改鼠标点击

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 触发器将再次启动。我通过使用低级别更改触发器解决了这个问题，如果之前的更改调用来自鼠标按钮，则该触发器会停止传播。

Answer 1

这里演示了如何捕获和分析哪些事件更改了输入以及按什么顺序更改。

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);
});

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

Answer 2

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

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('keydown', () => lastEv = 'keydown')
on('mousedown', () => lastEv = 'mousedown')

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

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