OnClick событие не работает на первой кнопке мыши в Митрила

Question

Почему «нажмите» обратного вызова не вызывается в первый раз после того, как какой-то текст вводится на вход как 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

OnChange событие на вход в срабатывает при наведении мыши вниз, что приводит к перерисовке вида, что приводит к опусканию кнопки. Событие клика запускается при нажатии мыши (попробуйте нажать и удерживать кнопку мыши, не набрав ничего, чтобы понять, что я имею в виду). Обычно быстрый щелчок имеет пробел ~ 200 мс между базовыми событиями onmousedown и onmouseup из-за физического расстояния между отдыхом и нажатой позицией на механическом переключателе кнопки мыши.

Так в основном, что происходит это:

1 - кнопка мыши получает нажата, вызывает OnChange

2 - вид перерисовывает, и перемещает кнопку вниз, чтобы освободить место для текста в <p>

3 - через некоторое время кнопка мыши не нажата, запускает onclick

4 - событие просматривает текущую позицию мыши (которая находится сверху <p>), поэтому она не запускается событие на кнопке

Вы можете видеть, что это так, набрав что-то, затем щелкая и удерживая нажатой кнопку мыши, а затем снова перетащите курсор на кнопку.

Чтобы избежать этой проблемы, вы можете использовать onmousedown вместо onclick, чтобы и onchange, и onmousedown происходили в одном и том же анимационном кадре, или если пользовательский интерфейс разрешает, вы можете переместить <p> под кнопкой.