javascript - 在 Mithril 中单击第一个按钮时未运行 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 事件在鼠标按下时触发，这会导致 View 重绘，从而使按钮向下移动。单击事件在鼠标松开时触发(尝试单击并按住鼠标按钮而不输入任何内容以了解我的意思)。由于鼠标按钮机械开关上的静止位置和按下位置之间的物理距离，快速点击通常在底层的 onmousedown 事件和 onmouseup 事件之间有大约 200 毫秒的间隔。

所以基本上，发生的事情是:

1 - 鼠标按钮被按下，触发 onchange

2 - View 重绘，并向下移动按钮以为 <p> 中的文本腾出空间

3 - 一段时间后，鼠标按钮松开，触发 onclick

4 - 事件查看鼠标的当前位置(现在位于 <p> 之上)，因此不会触发按钮上的事件

您可以通过键入内容，然后单击并按住鼠标按钮，然后再次将光标拖到按钮上来看到这种情况。

为了避免这个问题，你可以使用 onmousedown 而不是 onclick，这样 onchange 和 onmousedown 都发生在同一个动画帧内，或者如果 UI 允许，你可以移动 <p>在按钮下方。