evento onclick non è in esecuzione sul primo pulsante scatto in Mithril

Question

Perché il "click" callback non invocato la prima volta dopo un po 'di testo viene inserito nella presa come in this fiddle?

var app = {}; 

app.controller = function(){ 
    this.data = m.prop(""); 
    this.click = function(){ 
     alert("button clicked"); 
    }; 
}; 

app.view = function(ctrl){ 
    return m("html", [ 
     m("body", [ 
      m("div", [ 
       m("p", ctrl.data()), 
       m("input[type=text]", { onchange: m.withAttr("value", ctrl.data) }), 
       m("button", { onclick: ctrl.click }, "Click") 
      ]) 
     ]) 
    ]); 
}; 

m.module(document, app); 

Answer 1

evento onchange dell'ingresso viene attivato al passaggio del mouse giù, che fa sì che la vista si ridisegna, facendo in modo che il pulsante si sposti verso il basso. L'evento click viene attivato al passaggio del mouse (prova a fare clic e tieni premuto il pulsante del mouse senza digitare nulla per vedere cosa intendo). Di solito un click veloce ha uno spazio di ~ 200ms tra il sottostante onmousedown e gli eventi onmouseup a causa della distanza fisica tra il riposo e la posizione premuta sull'interruttore meccanico del pulsante del mouse.

Quindi, fondamentalmente, ciò che sta accadendo è:

1 - pulsante del mouse viene premuto, fa scattare onchange

2 - vista ridisegna, e il pulsante si sposta verso il basso per fare spazio per il testo nella <p>

3 - qualche tempo dopo, il pulsante del mouse non viene premuto, attivando l'onclick

4 - l'evento esamina la posizione corrente del mouse (che si trova in cima allo <p> ora), quindi non si attiva l'evento sul pulsante

Si può vedere che questo è il caso digitando qualcosa, quindi facendo clic e tenendo premuto il pulsante del mouse, quindi trascinando di nuovo il cursore sul pulsante.

Per evitare questo problema, è possibile utilizzare un onmousedown anziché un onclick in modo che sia onchange che onmousedown avvengano nello stesso frame di animazione o se l'interfaccia utente lo consente, è possibile spostare <p> sotto il pulsante.