HTML5 INPUT type='number' - distinguish between focus and value-change mouse clicks

问题

In the HTML5 INPUT type='number' the user can change the value by clicking on up/down arrows that are part of the INPUT box. The user might also click in the box for focus or for editing its contents.

Is there any easy way to distinguish between these two activities in the click trigger?

---

from @cvsguimaraes answer, which better demonstrates the theory.

using his methodology, here is my finished(?) version. the purpose: make sure regular change triggers are called when using +/- to change data.

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

on chrome it's working flawlessly so far except that when you remove focus from the ITEM the change trigger will kick in again. I solved this by having a low level change trigger that stops propagation if the previous change call was from the mouseup.

回答1:

Here's it! When the user change the value by clicking on up/down arrows it triggers oninput, and conveniently it's triggered between onmousedown and onmouseup

<script>
    window.onload = function() {
        changeType = 'none';
        var input = document.getElementById('number');
        var events = [
                "mousedown",
                "mouseup",
                "input",
                "keypress"
            ];
        events.map(function(ev){
            input.addEventListener(ev,function(){
                switch(ev) {
                case 'input':
                    if(changeType!='keypress') changeType = 'input';
                break;
                case 'mouseup':
                    switch(changeType) {
                        case 'mousedown':
                            console.log('normal click');
                        break;
                        case 'keypress':
                            console.log('click with edit via keyboard');
                        break;
                        case 'input':
                            console.log('click on up/down arrows');
                        break;
                    }
                break;
                default:
                    changeType = ev;
                break;
            }
            },false);
        });
    }
</script>
<input type="number" id="number">

---

EDIT Now it handles also keyboard edit when mouse is pressed.

---

EDIT Is much better now, thanks to gion_13

回答2:

Here is a demo of how you can capture and analyze which events change the input and in what order.

html:

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

script:

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

来源：https://stackoverflow.com/questions/7268324/html5-input-type-number-distinguish-between-focus-and-value-change-mouse-cli