HTML5 INPUT type = 'number' - rozróżnia kliknięcia myszą i wartością zmiany

Question

Użytkownik może zmienić wartość za pomocą strzałek w górę/w dół, które są częścią pola INPUT w HTML5 INPUT type='number'. Użytkownik może również kliknąć pole, aby ustawić ostrość lub edytować jego zawartość.

Czy istnieje jakiś prosty sposób na rozróżnienie tych dwóch działań w wyzwalaczu click?

---

z odpowiedzi @cvsguimaraes, która lepiej demonstruje teorię.

używając swojej metodologii, oto moja ukończona (?) Wersja. cel: upewnij się, że regularne wyzwalacze change są wywoływane podczas używania +/- do zmiany danych.

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

na chromie to działa bez zarzutu tak daleko wyjątkiem że po wyjęciu ostrość od item change spust rozpocznie się ponownie. Rozwiązałem to przez wprowadzenie wyzwalacza zmiany niskiego poziomu, który zatrzymuje propagację, jeśli poprzednie wywołanie zmiany pochodziło z mouseup.

Answer 1

Oto ona! Kiedy użytkownik zmieni wartość klikając strzałek góra/dół wyzwala oninput i wygodnie to wywołane między onmousedown i 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 teraz obsługuje również edytować klawiatury gdy mysz jest wciśnięty.

---

EDIT jest znacznie lepiej, dzięki gion_13

Answer 2

Here jest demo, w jaki sposób można przechwytywać i analizować wydarzenia, które zmieni wejście i w jakiej kolejności.

html:

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

scenariusz:

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