在Mithril中點擊第一個按鈕時沒有運行Onclick事件

Question

為什么在將一些文本輸入輸入后第一次沒有調用“click”回調？

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事件，這會導致視圖重繪，從而使按鈕向下移動。 鼠標向上觸發click事件（嘗試單擊並按住鼠標按鈕而不鍵入任何內容以查看我的意思）。 通常，由於鼠標按鈕機械開關上靜止和按下位置之間的物理距離，快速點擊在底層onmousedown和onmouseup事件之間有大約200ms的間隙。

所以基本上，發生的事情是：

1 - 按下鼠標按鈕，觸發更改

2 - 查看重繪，並向下移動按鈕以為<p>的文本騰出空間

3 - 一段時間后，鼠標按鈕被取消按下，觸發onclick

4 - 事件查看鼠標的當前位置（現在位於<p>頂部），因此它不會觸發按鈕上的事件

通過鍵入內容，然后單擊並按住鼠標按鈕，然后再次將光標拖到按鈕上，可以看到這種情況。

為了避免這個問題，您可以使用onmousedown而不是onclick，以便onchange和onmousedown都在同一個動畫幀中發生，或者如果UI允許，您可以移動按鈕下方的<p> 。