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

以下是如何捕获和分析哪些事件更改输入以及按什么顺序更改的演示.

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方便地触发事件。mousedownmouseup

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>