在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>按钮下方.